Как поместить фоновый цвет только в раздел выбора? CSS

Question

У меня есть этот пример:

link

КОД HTML:

<div class="select-style"> 
    <select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
    </select> 
</div> 

КОД CSS:

.select-style { 
    padding: 0; 
    margin: 0; 
    border: 1px solid #ccc; 
    width: 120px; 
    border-radius: 3px; 
    overflow: hidden; 
    background-color: #fff; 
    background: #fff url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%; 
} 

.select-style select { 
    padding: 5px 8px; 
    width: 130%; 
    border: none; 
    box-shadow: none; 
    background-color: transparent; 
    background-image: none; 
    -webkit-appearance: none; 
     -moz-appearance: none; 
      appearance: none; 
} 

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

я помещал картину, чтобы лучше понять, что я хотеть сделать.

Как я могу сделать это на моей структуре?

Имеет ли нынешняя структура? Или другая структура создала HTML?

Заранее благодарен!

Answer 1

Вам нужно что-то вроде этого?

http://codepen.io/anon/pen/bVWmgP

.select-style:after { 
      content: ''; 
      background-color: #000; 
      position: absolute; 
      border-left: 3px solid #F00; 
      z-index: 0; 
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 85px; 
     } 

    .select-style:before { 
     content: ''; 
     background-color: white; 
     position: absolute; 
     z-index: -20; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
    } 

Примечание: Вы не сможете изменить выберите списки стрелка цвета без добавления дополнительного изображения, которое будет представлять эту стрелку.

Answer 2

Для этого можно использовать псевдоэлемент.

Прикрепите: псевдоэлемент к div и примените желаемые свойства background-color и border-left. Чтобы сделать его видимым, примените background-color: transparent к .select-style.

.select-style { 
 
    position: relative; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 1px solid #ccc; 
 
    width: 120px; 
 
    border-radius: 3px; 
 
    overflow: hidden; 
 
    background: transparent url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%; 
 
} 
 
.select-style select { 
 
    padding: 5px 8px; 
 
    width: 130%; 
 
    border: none; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
} 
 
.select-style select:focus { 
 
    outline: none; 
 
} 
 
.select-style:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 36px; 
 
    height: 100%; 
 
    background-color: #ddd; 
 
    border-left: 1px solid #ccc; 
 
    top: 0; 
 
    right: -1px; 
 
    z-index: -1; 
 
    border-radius: 0 1px 1px 0; 
 
}

<div class="select-style"> 
 
    <select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
    </select> 
 
</div>

Answer 3

Вы можете использовать linear-gradient в сочетании с background-image.

1. background-image свойство позволяет сочетание url() и linear-gradient(), так что вы можете попробовать отделяя значения. То же самое для background-position, поскольку мы контролируем положение изображения url с 95px значением, в то время как линейный градиент невозможен с центром центра.
2. Использование линейного градиента. Первые 70% заполнены белым цветом фона, а остальные 30% будут светло-серыми в этом примере.
3. Создайте границу с использованием небольшой доли процентного значения, то есть 70% gray, до 71% gray в линейном градиенте.

.select-style { 
 
    background-image: url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif"), linear-gradient(to right, white 70%, gray 70%, gray 71%, lightgray 71%, lightgray 100%); 
 
    background-position: 95px center, center center; 
 
    background-repeat: no-repeat; 
 
    border: 1px solid #ccc; 
 
    border-radius: 3px; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    width: 120px; 
 
} 
 
.select-style select { 
 
    padding: 5px 8px; 
 
    width: 130%; 
 
    border: none; 
 
    box-shadow: none; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
} 
 
.select-style select:focus { 
 
    outline: none; 
 
}

<div class="select-style"> 
 
    <select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
    </select> 
 
</div>