如何將背景顏色只選擇一部分？ 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> 

CODE 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也是如此，因爲我們正在使用95px值控制url圖像位置，而線性漸變不受中心影響。
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>