How to style select box form. Does it have any limitations?

Question

I'm trying style select box form in HTML/CSS. I need something like this:

enter image description here

My current result is here: http://jsfiddle.net/LPN4J/1/

Is it possible?

Here is my code:

html:

<label>
    <select>
        <option selected> Select your option </option>
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
</label>

css:

body, html {background:#444; text-align:center; padding:50px 0;}

select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label {position:relative}
label:after {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

Please any hint. I learn css from scratch.

This has been covered all over SO, but again: these elements cannot be completely controlled as they are dependent on the operating system for their style. You will have to use Javascript to change this. Google is your best friend! — Kyle, Jun 14 '13 at 10:44
want something like this? http://silviomoreto.github.io/bootstrap-select/ — Mohammad Areeb Siddiqui, Jun 14 '13 at 10:46
Possible answer http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript — Ravimallya, Jun 14 '13 at 10:51

score 3 · Accepted Answer · answered Jun 14 '13 at 10:52

3

Well, according to your question this plugin for bootstrap may help you.

Usage:

Download this(.zip) or this(.tar.gz) to download the plugin
Then put the files in your related folder, respectively.
On your select box, just add a class of selectpicker.

answered Jun 14 '13 at 10:52

Mohammad Areeb Siddiqui

9,795
14
71
113

How to use this twitter bootstrap plugin only for one element on the page? If I use it all my site use twitter bootstrap element (url are blue etc) – user2307683 Jun 14 '13 at 11:13

score 2 · Answer 2 · answered Jun 14 '13 at 10:48

Maybe something like this?

html:

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

css:

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #ddd;
   border: 1px solid #ccc;
   }

JSFIDDLE

How to style select box form. Does it have any limitations?

2 Answers2