CSS Custom Dropdown Select that works across all browsers IE7 FF Webkit

Question

I would like to make a custom dropdown that works across all the browsers  I created one here but the arrow is not clickable  If I set it as the background for the select  then firefox will overwrite an arrow on top of it  Can someone tell me what s the best technique to get a custom looking dropdown that works across all the browsers and how do I make that knob clickable without Javascript   http   jsfiddle net DJDf8 1   CSS    x000D   x000D   menulist   x000D    -webkit-appearance  none  x000D    -moz-appearance  none  x000D    appearance  none  x000D    height  32px  x000D    border  1px solid  000  x000D    width  260px  x000D    text-indent  8px  x000D    x000D   x000D   arrow   x000D    cursor  pointer  x000D    height  32px  x000D    width  24px  x000D    position  absolute  x000D    right  0px  x000D    background-color   c8c8c8  x000D    background  url  http   icons aniboom com Energy Resources userControls TimeFrameDropDownFilter Dropdown Arrow png   0  x000D    x000D   lt span style  position relative   gt  x000D            lt span class  arrow   gt  lt  span gt  x000D   lt select id  menulist  gt  x000D            lt option value  one  gt One lt  option gt  x000D            lt option value  two  gt Two lt  option gt  x000D   lt  select gt  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

As per Link  http   bavotasan com 2011 style-select-box-using-only-css  there are lot of extra rework that needs to be done Put extra div and position the image there  Also the design will break as the option drilldown will be mis alligned to the the select   Here is an easy and simple way which will allow you to put your own dropdown image and remove the browser default dropdown  Without using any extra div   Its cross browser as well   HTML   lt select class  dropdown  name  drop-down  gt     lt option value  select-option  gt Please select    lt  option gt     lt option value  Local-Community-Enquiry  gt Option 1 lt  option gt     lt option value  Bag-Packing-in-Store  gt Option 2 lt  option gt   lt  select gt    CSS  select dropdown     margin  0px    margin-top  12px    height  48px    width  100     border-width  1px    border-style  solid    border-color   666666    padding  9px    font-family  tescoregular    font-size  16px    color   666666    -webkit-appearance  none    -webkit-border-radius  0px    -moz-appearance  none    appearance  none    background  url  yoururl dropdown png   no-repeat 97  50   ffffff    background-size  11px 7px

User · Answer

lt select class  dropdownmenu  name  drop-down  gt       lt option class  dropdownmenu list1  value  select-option  gt Choose     lt  option gt       lt option class  dropdownmenu list2  value  Topic 1  gt Option 1 lt  option gt       lt option class  dropdownmenu list3  value  Topic 2  gt Option 2 lt  option gt   lt  select gt    This works best in Firefox  Too bad that Chrome and Safari do not support this rather easy CSS styling

User · Answer

You might check Select2 plugin   http   ivaynberg github io select2   Select2 is a jQuery based replacement for select boxes  It supports searching  remote data sets  and infinite scrolling of results   It s quite popular and very maintainable  It should cover most of your needs if not all

User · Answer

I was also having a similar problem  Finally found one solution at https   techmeals com fe questions htmlcss 4 How-to-customize-the-select-drop-down-in-css-which-works-for-all-the-browsers  Note   1  For Firefox support there is special CSS handling for SELECT element s parent  please take a closer look   2  Download the down png from Down png  CSS code             For Firefox browser we need to style for SELECT element parent               -moz-document url-prefix                     Please note this is the parent of  SELECT  element                  select-example                      background  url  https   techmeals com external images down png                    background-color   FFFFFF                  border  1px solid  9e9e9e                  background-size  auto 6px                  background-repeat  no-repeat                  background-position  96  13px                                      IE specific styles             media all and  -ms-high-contrast  none    -ms-high-contrast  active                             select my-select-box                   padding  0 0 0 5px                                      IE specific styles             supports  -ms-accelerator true                    select my-select-box                   padding  0 0 0 5px                                   select my-select-box                outline  none              background   fff              -moz-appearance  window              -webkit-appearance  none              border-radius  0px              text-overflow                  background-image  url  https   techmeals com external images down png                background-size  auto 6px              background-repeat  no-repeat              background-position  96  13px              cursor  pointer              height  30px              width  100               border  1px solid  9e9e9e              padding  0 15px 0 5px              padding-right  15px 9          This will be apllied only to IE 7  IE 8 and IE 9 as                 padding-right  15px            This will be apllied only to IE 7 and below                  padding-right  15px           This will be apllied only to IE 6 and below                 HTML code       lt div class  select-example  gt           lt select class  my-select-box  gt               lt option value  1  gt First Option lt  option gt               lt option value  2  gt Second Option lt  option gt               lt option value  3  gt Third Option lt  option gt               lt option value  4  gt Fourth Option lt  option gt           lt  select gt       lt  div gt

User · Answer

This is very simple  you just need to add a background image to the select element and position it where you need to  but don t forget to add   -webkit-appearance  none  -moz-appearance  none  appearance  none    According to http   shouldiprefix com  appearance  Microsoft Edge and IE mobile support this property with the -webkit- prefix rather than -ms- for interop reasons   I just made this fiddle http   jsfiddle net drjorgepolanco uxxvayqe

User · Answer

The pointer-events could be useful for this problem as you would be able to put a div over the arrow button  but still be able to click the arrow button   The pointer-events css makes it possible to click through a div   This approach will not work for IE versions older than IE11  however  You could something working in IE8 and IE9 if the element you put on top of the arrow button is an SVG element  but it will be more complicated to style the button the way you want proceeding like this   Here a Js fiddle example  http   jsfiddle net e7qnqzx6 2

[css] CSS Custom Dropdown Select that works across all browsers IE7+ FF Webkit

Examples related to css

Examples related to cross-browser