Ho un semplice elenco a discesa e vorrei aggiungere un'ombra esterna. È difficile trovare codice funzionante. Che cosa suggerisci?Come aggiungo l'ombra esterna a Seleziona elemento in HTML?
<select>
<option>apple</option>
</select>
soluzione più semplice è
CSS3:
-moz-box-shadow:5px 5px 5px #191919;
-webkit-box-shadow:5px 5px 5px #191919;
box-shadow:5px 5px 5px #191919;
che è offsetX, offsetY, blur, color
Questo ovviamente funziona solo in un browser che supporti CSS3 boxshadows. O si può fare l'assegno per il sostegno voi stessi o utilizzare uno script come Modernizr
non ero consapevole del fatto che box-shadow non funziona con select elementi. Sono venuto con una soluzione abbastanza semplice:
http://www.jsfiddle.net/YjC6y/2/
L'idea è di creare dinamicamente DIV elements con una proprietà css3 box-ombra e un indice z -1. Funziona abbastanza bene per me, devi solo adottare le proprietà CSS per tutti i browser.
Bene, ecco qualcosa che ho buttato insieme piuttosto velocemente. Si affida a Modernizr per il rilevamento delle funzioni e include ogni select con un div a cui è impostato box-shadow.
if (Modernizr.boxshadow) {
$('select').wrap('<div class="shadow" />').parent().width(function() {
return $(this).outerWidth() - 2
}).height(function() {
return $(this).outerHeight() - 2
});
}
Questo codice tenta di compattare l'esterna div da 2px per compensare le imbottiture browser. E il CSS:
.shadow {
-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: inline-block;
}
Non particolarmente efficace, ma ancora meglio di niente. Il problema principale qui sarebbe che gli stili di forma di default del sistema operativo potrebbero essere diversi. Per questo ho impostato uno border-radius piuttosto grande, ma credo che gli select di OSX siano più arrotondati di così, anche se non ho nulla a disposizione per testarlo.
Vedere: http://jsfiddle.net/ykZCz/5/ per la versione live.
Il problema è la larghezza e l'altezza di OSX è inferiore 2-2 pixel. Gli angoli arrotondati vanno bene. – fabrik
@fabrik Sigh ... probabilmente non funzionerà se non impostiamo manualmente il 'border-radius 'sull'elemento' select' stesso. –
ho fatto in questo modo:
<style type="text/css">
.shadow {
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
border-collapse: separate;
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
#dropDownApple {
width:100px;
}
.fullWidth {
width:100%;
border:0;
margin:0;
}
</style>
<div id="dropDownApple" class="shadow">
<select class="fullWidth">
<option>apple</option>
</select>
</div>
Basta cambiare la larghezza in #dropDownApple per adattare la larghezza modulo e si può scherzare con gli altri elementi CSS per ottenere l'altezza desiderata troppo. Copia e incolla quanto sopra tra i tag <body></body> per vederlo in azione. Ha lavorato in IE9, Chorme, Safari e Firefox.
È inoltre possibile creare un'ombra esterna nella casella di input utilizzando puro CSS. Per fare ciò, devi prima dichiarare il bordo e quindi puoi usare la proprietà box-shadow per creare il tuo menu a discesa. L'ho fatto di recente in un mio progetto, quindi so che funziona per i browser moderni.
Ecco un esempio di codice:
#example {
-webkit-box-shadow: 1px 1px 0px rgba(50, 50, 50, 0.49);
-moz-box-shadow: 1px 1px 0px rgba(50, 50, 50, 0.49);
box-shadow: 1px 1px 0px rgba(50, 50, 50, 0.49);
border:1px solid gray;
}
Utilizzo di CSS per rendere il menu che utilizza il tag select per fare rendere un menu a discesa funziona. L'ho provato, stasera, per ironia della sorte, prima di leggerlo.Potresti provare qualcosa di simile, di seguito, all'interno del CSS all'interno della tua pagina HTML (non all'interno del tuo file CSS esterno, a meno che non colleghi prima il file CSS esterno alla tua pagina HTML dove vuoi che il tuo menu abbia questo effetto box-shadow) .
select {
width: 200px;
height: 20px;
background-color: #FFFFFF;
position: relative;
box-shadow: 6px 6px 2px 2px #BF0B3E;
}
Tuttavia, non dimenticare di aggiungere la proprietà box-shadow. Forse è stato per questo che non ha funzionato la creazione di un effetto box-shadow per il menu che utilizza per crearlo, ma ha funzionato solo creando l'effetto per la parte a discesa del menu stesso, una volta cliccato quel menu? O se il tuo CSS fosse all'interno del tuo file CSS esterno, assicurati di collegare il tuo file CSS esterno alla tua pagina html di qualunque pagina HTML desideri che il tuo menu abbia l'effetto box-shadow. :) Funziona ed è molto meno codificante di quanto la maggior parte potrebbe fare. :)
@phpKid
Dal momento che non ho avuto abbastanza punti, tuttavia, di poter aggiungere un coment, mi post a voi, qui, in questo modo: ...
Hai menzionato il codice che hai inserito. Perché tutto allora quando un semplice metodo potrebbe funzionare come qualcosa del seguente codice CSS? Potrebbe salvare questa persona dall'uso di un codice molto meno. ;)
select {
width: 200px;
height: 20px;
background-color: #FFFFFF;
position: relative;
box-shadow: 6px 6px 2px 2px #BF0B3E;
}
Si può provare per ombra esterna:
box-shadow: 1px 6px 2px 2px #ccc;
o se si vuole che all'interno dell'elemento (per un pulsante):
box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);
Si prega di provarlo prima di rispondere. – fabrik
Sì, non ha funzionato, ho provato questa soluzione molto tempo fa. – JohnMax
Immagino che voglia che l'ombra sia nel menu a discesa, non nell'elemento di selezione. – Douglas