Come mettere colore di sfondo solo una sezione di una selezione? CSS

Question

ho questo campione:

link

codice 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> 

codice 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; 
} 

ho messo una foto per capire meglio quello che ho voglio fare.

Come posso fare questo sul mio struttura?

La struttura attuale? Oppure un'altra struttura ha creato l'HTML?

Grazie in anticipo!

Answer 1

Volevi qualcosa del genere?

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; 
    } 

Nota: Non sarà in grado di cambiare elenchi di selezione freccia di colore senza l'aggiunta di un'immagine in più che rappresenterà quella freccia.

Answer 2

È possibile utilizzare uno pseudo-elemento per eseguire questa operazione.

Collegare uno pseudoelemento allo div e applicare le proprietà desiderate background-color e border-left. Per renderlo visibile, applicare background-color: transparent a .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

È possibile fare uso di linear-gradient combinato con background-image.

1. La proprietà background-image consente combinazione di url() e linear-gradient() così si può tentare che separa i valori. Lo stesso vale per lo background-position poiché stiamo controllando la posizione dell'immagine dell'URL con il valore 95px mentre il gradiente lineare non è disturbato dal centro.
2. Uso del gradiente lineare, il primo 70% viene riempito con il colore di sfondo bianco, mentre l'altro 30% sarà grigio chiaro nell'esempio.
3. Creare un bordo utilizzando una piccola frazione del valore percentuale, ovvero 70% gray a 71% gray nel gradiente lineare.

.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>