Cambia colore e aspetto del menu a discesa arrow

Desidero modificare l'aspetto predefinito della freccia di un elenco a discesa in modo che abbia lo stesso aspetto nei vari browser. C'è un modo per ignorare l'aspetto predefinito della freccia rivolta verso il basso utilizzando CSS o altro?Cambia colore e aspetto del menu a discesa arrow

fonte

2009-03-04 Iris

No, la gestione dei file cross-browser è molto difficile se non impossibile da ottenere correttamente per tutti i browser. Se ti interessa davvero l'aspetto di quei widget dovresti usare un'implementazione javascript.

vedere http://www.456bereastreet.com/archive/200409/styling_form_controls/ e http://developer.yahoo.com/yui/examples/button/btn_example07.html

fonte

2009-03-04 17:00:26 TomHastjarjanto

sul bersaglio .... + 1 – repzero

L'elemento <select> è generato dall'applicazione e lo stile non è parte della specifica CSS/HTML.

Si dovrebbe simulare con il proprio DIV e sovrapporlo a quello esistente o creare il proprio controllo emulando la stessa funzionalità.

fonte

2009-03-04 17:01:26

No, non è possibile farlo utilizzando un effettivo <select>, ma ci sono tecniche che consentono di "sostituirli" con soluzioni javascript che sembrano migliori.

Ecco un buon articolo sul tema: <select> Something New

fonte

2009-03-04 17:02:32

A meno che non si ha intenzione di creare il proprio menu a tendina (e non utilizzando una libreria standard elenco a discesa), si sono bloccati. L'aspetto del controllo DDL sarà basato sul sistema in esecuzione e/o sul browser che sta visualizzando l'output.

fonte

2009-03-04 17:02:50 TheTXI

Non facile, ho paura. Il problema è che Css non può sostituire la freccia in una selezione in quanto viene resa dal browser. Ma puoi creare un nuovo controllo da div e elementi di input e Javascript per eseguire la stessa funzione della selezione.

Prova ad esaminare alcuni dei plugin di completamento automatico per Jquery, ad esempio.

altrimenti non c'è alcune informazioni su l'elemento di selezione qui:

http://www.devarticles.com/c/a/Web-Style-Sheets/Taming-the-Select/

fonte

2009-03-04 17:07:57 Richard

È possibile raggiungere questo obiettivo con i CSS ma non sono techinically cambiando la freccia stessa.

In questo esempio, in realtà sto nascondendo la freccia predefinita e visualizzando invece la mia freccia.

HTML:

<div class="styleSelect"> 
    <select class="units"> 
    <option value="Metres">Metres</option> 
    <option value="Feet">Feet</option> 
    <option value="Fathoms">Fathoms</option> 
    </select> 
</div>

CSS:

.styleSelect select { 
    background: transparent; 
    width: 168px; 
    padding: 5px; 
    font-size: 16px; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 
    color: #000; 
} 

.styleSelect { 
    width: 140px; 
    height: 34px; 
    overflow: hidden; 
    background: url("images/downArrow.png") no-repeat right #fff; 
    border: 2px solid #000; 
}

fonte

2013-01-31 03:10:23 Sphvn

Questa è una buona soluzione, tuttavia ci sono due problemi: 1. in IE8 uno sfondo blu dopo la selezione è sopra l'immagine della freccia, 2. in Opera l'immagine della freccia non è visibile le. :( – mj82

+14

Questo era più inteso per essere una guida piuttosto che per me completare tutto il lavoro per OP – Sphvn

Grazie questo è tutto ciò che volevo. – sohaib

Abbiamo usato YUI, scelti, e stanno attualmente utilizzando il plugin jQuery Select2: https://select2.github.io/

è abbastanza robusta, la freccia è solo la punta dell'iceberg.

Non appena la selezione stilizzata diventa un requisito, sono d'accordo con gli altri, con un plug-in. Non ucciditi reinventando la ruota.

fonte

2016-01-13 01:21:13 sb333

Esso può essere fatto da:

select{ 
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; 
}

select{ 
 
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; 
 
    
 
    
 
    -moz-appearance: none; 
 
    -webkit-appearance: none; 
 
    -webkit-border-radius: 0px; 
 
    appearance: none; 
 
    outline-width: 0; 
 
    
 
    padding: 10px 10px 10px 5px; 
 
    display: block; 
 
    width: 10em; 
 
    border: none; 
 
    font-size: 1rem; 
 
    
 
    border-bottom: 1px solid #757575; 
 
    }

<div class="styleSelect"> 
 
    <select class="units"> 
 
    <option value="Metres">Metres</option> 
 
    <option value="Feet">Feet</option> 
 
    <option value="Fathoms">Fathoms</option> 
 
    </select> 
 
</div>

fonte

2017-03-04 16:53:40 Lambder

come si personalizzerebbe il colore con questo metodo? – jbodily

utilizzare diversi svg di sfondo. – Lambder

provare a cambiare il colore del tuo "border-top" attributo bianco

fonte

2017-04-27 06:46:50 Bojan

Cambia colore e aspetto del menu a discesa arrow

risposta

Problemi correlati