Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I've been looking at this question on stack - How to style a <select> dropdown with CSS only without JavaScript? and wondering if it is possible to use rounded corners using this technique.

In the examples i've knocked up as a test it's not been possible as the select box seems to be pertrude in the background. I think the technique is decent for getting a reasonable level of control over the styling of the boxes whilst still keeping native OS support which is what i'm after in this instance. If it proves too difficult to use rounded corners in this technique then i'll just drop it.

Heres a nice jsfidle - http://jsfiddle.net/danield770/YvCHW/6/

My css is currently something like this.

.styled-select select {
    background: transparent;
    width: 268px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    height: 28px;
}

.styled-select{
    padding: 0;
    width: 240px;
    height: 28px;
    overflow: hidden;
    background: url(images/drop.png) no-repeat right #fff;
    border: 1px solid #ccc;
}
share|improve this question
It's very hard to understand what you're trying to do but are you aware of border-radius ? – dystroy Jan 20 at 17:16

2 Answers

up vote 1 down vote accepted

You can use border-radius to add rounded corners. Reference

.styled{
   width: 120px;
   height: 34px;
   overflow: hidden;
   background: url(http://www.stackoverflow.com/favicon.ico) no-repeat 96% #ddd;
   border-radius: 10px;
}

FIDDLE

share|improve this answer
up vote 1 down vote

Works for me if I simply apply border-radius on it.

.styled-select{
    border-radius: 10px;
}

jsFiddle Demo

share|improve this answer
be sure to add browsers prefixes for cross browser ;) – Tom Sarduy Jan 20 at 17:32
@TomSarduy Here is the browser support table. Only iOS Safari 3.2 and Android Browser 2.1 needs the -webkit- prefix. – bažmegakapa Jan 20 at 19:24

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.