Qual è il modo migliore per ottenere un effetto luminoso quando ci si concentra su un campo di testo in HTML? Può essere fatto con i CSS da solo o coinvolge le immagini? Controlla le pagine di accesso per Twitter e Tumblr per esempi di lavoro.Effetto "incandescente" del campo di testo come le pagine di accesso di Twitter e Tumblr?
Basta usare il :focus pseudo-classe, border e box-shadow:
.text:focus {
border: 1px solid #07c;
box-shadow: 0 0 10px #07c;
}
Sembra fantastico, grazie – raffian
avrei avvicinarlo utilizzando un'ombra scatola CSS e quindi impostare il colore blu invece che grigio/nero.
Potete fornire un esempio? Non sono un esperto di CSS! – raffian
Alcune altre persone hanno pubblicato esempi. Ma se non sei un esperto, puoi divertirti con questo sito. È fantastico per creare piccoli bit css come un'ombra di una scatola. http://css3generator.com/ –
hey, questo è un ottimo sito per testare CSS, grazie – raffian
CSS:
#form1:focus { border: 2px solid blue; }
HTML:
<input id="form1" type="text"/>
Altri modi che ho trovato:
utilizzare il focus
campione:http://jsfiddle.net/uday99/kFGmC/23/
se si sta utilizzando cross-browser si avvicina:
.active-field, .selector-for-field:focus {
-webkit-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
-khtml-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
-moz-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
-o-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
box-shadow: 0 0 3px rgb(34%, 71%, 94%);
border:1px solid rgb(34%, 71%, 94%);
}
Quindi aggiungere questa classe per il campo evidenziato al clic o messa a fuoco, ecc, se necessario.
È inoltre possibile ottenere quelli specifici di IE, se necessario.
Le versioni prefissate di 'box-shadow' non sono aggiornate; non dovresti usarli – Ryan
Non sono d'accordo: continuo a vedere le versioni precedenti dei browser che utilizzano i nostri siti, quindi sono ancora in gioco. Ti suggerirei di confrontare il bisogno con i tuoi visitatori piuttosto che prendere il consiglio di cui sopra senza controllo. – MyStream
Sia le immagini, o di sicurezza CSS ombra http://css-tricks.com/snippets/css/css-box-shadow/
Proprio ispezionare l'elemento, il CSS è tutto lì. su ': focus' apply' border: 1px solid # 56B4EF; 'e' box-shadow: inset 0 1px 3px rgba (0,0,0, .05), 0 0 8px rgba (82,168,236, .6); ' –
possibile duplicazione di [CSS - Focus campi di login come Twitter solo con CSS?] (http://stackoverflow.com/questions/6282678/css-focus-login-fields-just-like-twitter-with-only-css) – user123444555621
@ Pumbaa80, non un duplicato, quella domanda riguarda gli aspetti funzionali dei campi di testo di login di Twitter, non il loro aspetto – raffian