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

User · Answer

http   jsfiddle net u3cybk2q 2  check on windows  iOS and Android  iexplorer patch    x000D   x000D   styled-select select   x000D     background  transparent  x000D     width  240px  x000D     padding  5px  x000D     font-size  16px  x000D     line-height  1  x000D     border  0  x000D     border-radius  0  x000D     height  34px  x000D     -webkit-appearance  none  x000D    x000D   styled-select   x000D     width  240px  x000D     height  34px  x000D     overflow  visible  x000D     background  url http   nightly enyojs com latest lib moonstone dist moonstone images caret-black-small-down-icon png  no-repeat right  FFF  x000D     border  1px solid  ccc  x000D    x000D   styled-select select  -ms-expand   x000D      display  none  x000D    x000D   lt div class  styled-select  gt  x000D      lt select gt  x000D         lt option gt Here is the first option lt  option gt  x000D         lt option gt The second option lt  option gt  x000D      lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

The select box arrow is a native ui element  it depends on the desktop theme or the web browser  Use a jQuery plugin  e g  Select2  Chosen  or CSS

User · Answer

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    lt div class  styled-select  gt      lt select gt         lt option gt Here is the first option lt  option gt         lt option gt The second option lt  option gt      lt  select gt      lt span gt Here is the first option lt  span gt   lt  div gt    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

User · Answer

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

User · Answer

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

[html] Select box arrow style

Examples related to html

Examples related to css