problem with <select> and :after with CSS in WebKit

问题:

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:

Test

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?

回答1:

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.

回答2:

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.

回答3:

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.

   Here is the first optionThe second option
 

回答4:

Faced the same problem. Probably it could be a solution:

OneTwoThree  #select-1 {     ... }  #select-1 + label:after {     ... } 

回答5:

This is a modern solution I cooked up using font-awesome. Vendor extensions have been omitted for brevity.

HTML

Select Color     
         RedBlueYellow     
 

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.

回答6:

To my experience it simply does not work, unless you are willing to wrap your 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 utf8U+25BE BLACK DOWN-POINTING SMALL TRIANGLE) UTF-8 representation is \xE2\x96\xBE which is %E2%96%BE when URL-encoded.

回答7:

This solution is similar to the one from sroy, but with css triangle instead of web font:

.select-wrapper {   position: relative;   width: 200px; } .select-wrapper:after {   content: "";   width: 0;   height: 0;   border-left: 5px solid transparent;   border-right: 5px solid transparent;   border-top: 6px solid #666;   position: absolute;   right: 8px;   top: 8px;   pointer-events: none; } select {   background: #eee;   border: 0 !important;   border-radius: 0;   -webkit-appearance:none;   -moz-appearance:none;   appearance:none;   text-indent: 0.01px;   text-overflow: "";   font-size: inherit;   line-height: inherit;   width: 100%; } select::-ms-expand {   display: none; }

   option 1option 2option 3

文章来源: problem with and :after with CSS in WebKit