Select box arrow style

Question

I want to make the second select box arrow become the same with the first one. But I have no idea why they are different, because I didn't style the arrow.

Answer 1

Browsers and OS's determine the style of the select boxes in most cases, and it's next to impossible to alter them with CSS alone. You'll have to look into replacement methods. The main trick is to apply appearance: none which lets you override some of the styling.

My favourite method is this one:

http://cssdeck.com/item/265/styling-select-box-with-css3

It doesn't replace the OS select menu UI element so all the problems related to doing that are non-existant (not being able to break out of the browser window with a long list being the main one).

Good luck :)

Answer 2

you can use jQuery selectbox replacement . It's a jQuery plugin.

http://cssglobe.com/post/8802/custom-styling-of-the-select-elements

The Pure-css http://bavotasan.com/2011/style-select-box-using-only-css/

Answer 3

for any1 using ie8 and dont want to use a plugin i've made something inspired by Rohit Azad and Bacotasan's blog, i just added a span using JS to show the selected value.

the html:

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

the css (i used only an arrow for BG but you could put a full image and drop the positioning):

.styled-select div
{
    display:inline-block;
    border: 1px solid darkgray;
    width:100px;
    background:url("/Style Library/Nifgashim/Images/drop_arrrow.png") no-repeat 10px 10px;
    position:relative;
}

.styled-select div select
{
    height: 30px;
    width: 100px;
    font-size:14px;
    font-family:ariel;

    -moz-opacity: 0.00;
    opacity: .00;
    filter: alpha(opacity=00);
}

.styled-select div span
{
    position: absolute;
    right: 10px;
    top: 6px;
    z-index: -5;
}

the js:

$(".styled-select select").change(function(e){
     $(".styled-select span").html($(".styled-select select").val());
});

Answer 4

The select box arrow is a native ui element, it depends on the desktop theme or the web browser. Use a jQuery plugin (eg Select2 , Chosen ) or CSS.

Answer 5

in Firefox 39 I've found that setting a border to the select element will render the arrow as (2). No border set, will render the arrow as (1). I think it's a bug.

Answer 6

http://jsfiddle.net/u3cybk2q/2/ check on windows, iOS and Android (iexplorer patch)

 .styled-select select { background: transparent; width: 240px; 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: visible; background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF; border: 1px solid #ccc; } .styled-select select::-ms-expand { display: none; } 

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