problem with select and after with CSS in WebKit

Question

I would like to add some style on a select box with the pseudo  after  to style my select box with 2 parts and without images   Here s the HTML    lt select name    gt     lt option value    gt Test lt  option gt   lt  select gt    And it doesn t work  I don t know why and I didn t find the answer in the W3C specs  Here s the CSS   select     -webkit-appearance  none    background  black    border  none    border-radius  0    color  white     select after     content         display  inline-block    width  24px  height  24px    background  blue      So is it normal or is there a trick

User · Answer

This post may help http   bavotasan com 2011 style-select-box-using-only-css   He is using a outside div with a class for resolving this issue    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  div gt

User · Answer

Faced the same problem  Probably it could be a solution    lt select id  select-1  gt       lt option gt One lt  option gt       lt option gt Two lt  option gt       lt option gt Three lt  option gt   lt  select gt   lt label for  select-1  gt  lt  label gt    select-1               select-1   label after

User · Answer

What if modifying the markup isn t an option   Here s a solution that has no requirements for a wrapper  it uses an SVG in a background-image  You may need to use an HTML entity decoder to understand how to change the fill colour   -moz-appearance  none  -webkit-appearance  none  appearance  none   background-image  url  data image svg xml charset US-ASCII  3Csvg 20xmlns 3D 22http 3A 2F 2Fwww w3 org 2F2000 2Fsvg 22 20width 3D 22292 4 22 20height 3D 22292 4 22 3E 3Cpath 20fill 3D 22 23000000 22 20d 3D 22M287 2069 4a17 6 2017 6 200 200 200-13-5 4H18 4c-5 200-9 3 201 8-12 9 205 4A17 6 2017 6 200 200 200 200 2082 2c0 205 201 8 209 3 205 4 2012 9l128 20127 9c3 6 203 6 207 8 205 4 2012 8 205 4s9 2-1 8 2012 8-5 4L287 2095c3 5-3 5 205 4-7 8 205 4-12 8 200-5-1 9-9 2-5 5-12 8z 22 2F 3E 3C 2Fsvg 3E    background-repeat  no-repeat  background-position  right  7em top 50   background-size   65em auto    Pinched from CSS-Tricks

User · Answer

This is a modern solution I cooked up using font-awesome  Vendor extensions have been omitted for brevity   HTML   lt fieldset gt       lt label for  color  gt Select Color lt  label gt       lt div class  select-wrapper  gt           lt select id  color  gt               lt option gt Red lt  option gt               lt option gt Blue lt  option gt               lt option gt Yellow lt  option gt           lt  select gt           lt i class  fa fa-chevron-down  gt  lt  i gt       lt  div gt   lt  fieldset gt    SCSS  fieldset        select-wrapper           position  relative           select               appearance  none              position  relative              z-index  1              background  transparent                 i                   position  absolute                  top  40                   right  15px                                  If your select element has a defined background color  then this won t work as this snippet essentially places the Chevron icon behind the select element  to allow clicking on top of the icon to still initiate the select action    However  you can style the select-wrapper to the same size as the select element and style its background to achieve the same effect   Check out my CodePen for a working demo that shows this bit of code on both a dark and light themed select box using a regular label and a  placeholder  label and other cleaned up styles such as borders and widths   P S  This is an answer I had posted to another  duplicate question earlier this year

User · Answer

To my experience it simply does not work  unless you are willing to wrap your  lt select gt  in some wrapper  But what you can do instead is to use background image SVG  E g        archive  options select opt       -moz-appearance  none      -webkit-appearance  none      padding-right  1 25EM      appearance  none      position  relative      background-color  transparent      background-image  url  data image svg xml charset utf8  3Csvg xmlns  http   www w3 org 2000 svg  version  1 1  height  10px  width  15px  3E 3Ctext x  0  y  10  fill  gray  3E E2 96 BE 3C text 3E 3C svg 3E        background-repeat  no-repeat      background-size  1 5EM 1EM      background-position  right center      background-clip  border-box      -moz-background-clip  border-box      -webkit-background-clip  border-box          archive  options select opt  -ms-expand           display  none          Just be careful with proper URL-encoding because of IE  You must use charset utf8  not just utf8   don t use double-quotes     to delimit SVG attribute values  use apostrophes     instead to simplify your life  URL-encode s   3E   In case you havee to print any non-ASCII characters you have to obtain their UTF-8 representation  e g  BabelMap can help you with that  and then provide that representation in URL-encoded form - e g  for    U 25BE BLACK DOWN-POINTING SMALL TRIANGLE  UTF-8 representation is  xE2 x96 xBE which is  E2 96 BE when URL-encoded

User · Answer

lt div class  select  gt   lt select name  you are  id  dropdown  class  selection  gt   lt option value  0  disabled selected gt Select lt  option gt   lt option value  1  gt Student lt  option gt   lt option value  2  gt Full-time Job lt  option gt   lt option value  2  gt Part-time Job lt  option gt   lt option value  3  gt Job-Seeker lt  option gt   lt option value  4  gt Nothing Yet lt  option gt   lt  select gt   lt  div gt    Insted of styling the select why dont you add a div out-side the select   and style then in CSS   select      width  100       height  45px      position  relative     select  after      content    f0d7       position  absolute      top  0px      right  10px      font-family   Font Awesome 5 Free       font-weight  900      color   0b660b      font-size  45px      z-index  2      dropdown      -webkit-appearance  button         -moz-appearance  button              appearance  button              height  45px              width  100           outline  none          border  none          border-bottom  2px solid  0b660b          font-size  20px          background-color   0b660b23          box-sizing  border-box          padding-left  10px          padding-right  10px

User · Answer

This solution is similar to the one from sroy  but with css triangle instead of web font    x000D   x000D   select-wrapper   x000D    position  relative  x000D    width  200px  x000D    x000D   select-wrapper after   x000D    content      x000D    width  0  x000D    height  0  x000D    border-left  5px solid transparent  x000D    border-right  5px solid transparent  x000D    border-top  6px solid  666  x000D    position  absolute  x000D    right  8px  x000D    top  8px  x000D    pointer-events  none  x000D    x000D  select   x000D    background   eee  x000D    border  0  important  x000D    border-radius  0  x000D    -webkit-appearance none  x000D    -moz-appearance none  x000D    appearance none  x000D    text-indent  0 01px  x000D    text-overflow      x000D    font-size  inherit  x000D    line-height  inherit  x000D    width  100   x000D    x000D  select  -ms-expand   x000D    display  none  x000D    x000D   lt div class  select-wrapper  gt  x000D     lt select gt  x000D       lt option value  1  gt option 1 lt  option gt  x000D       lt option value  2  gt option 2 lt  option gt  x000D       lt option value  3  gt option 3 lt  option gt  x000D     lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I was looking for the same thing since the background of my select is the same as the arrow color  As previously mentioned  it is impossible yet to add anything using  before or  after on a select element  My solution was to create a wrapper element on which I added the following  before code    select-wrapper       position  relative      select-wrapper before       content    f0d7       font-family  FontAwesome      color   fff      display  inline-block      position  absolute      right  20px      top  15px      pointer-events  none      And this my select  select       box-sizing  border-box      -webkit-box-sizing  border-box      -moz-box-sizing  border-box      width  100       padding  10px 20px      background   000      color   fff      border  none      -webkit-appearance  none      -moz-appearance  none      appearance  none     select  -ms-expand       display  none      I have used FontAwesome io for my new arrow  but you can use whatever else you want  Obviously this is not a perfect solution  but depending on your needs it might be enough

User · Answer

I haven t checked this extensively  but I m under the impression that this isn t  yet   possible  due to the way in which select elements are generated by the OS on which the browser runs  rather than the browser itself

[html] problem with <select> and :after with CSS in WebKit

Examples related to html

Examples related to css

Examples related to select