Pure CSS solution to styling specific <select> options in webkit based browsers?

后端未结

关注

 3  2024

小鲜肉 2021-01-20 03:34

Quite simply, is there any way to style specific select options in Chrome/Safari?

For example, if I had:

CSS:

.styled-select {
width: 342px;
    height: 30px;
    overflow: hidden;
    background: url("/img/selectarrow.png") no-repeat right;
    border: none;
    opacity: 0.8;
    background-color: #999999;
 }

.styled-select select {
  background: transparent;
  width: 342px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-top: 5px;
  font-size: 16px;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  font-weight: 200;
 font-family: "lato", sans-serif;
 font-size: 18px;
 }


 .styled-select select:focus {
outline: none;
 }

Here's a fiddle: http://jsfiddle.net/eshellborn/AyDms/

And then just make sure you get a picture called 'selectarrow' for the drop-down image.

0 讨论(0)

查看其它3个回答