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?
risposta
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/
- 1. Twitter L'altezza del campo di testo Bootstrap è troppo piccola?
- 2. Come modificare l'altezza del campo di testo?
- 3. Effetto di apertura delle pagine per HTML5?
- 4. Diminuisce l'altezza del campo di immissione Bootstrap di Twitter?
- 5. Collegamenti alle app Facebook e Twitter postare le pagine
- 6. Oggetto GLSL incandescente
- 7. Strumenti di sviluppo Tumblr
- 8. Attiva l'effetto incandescente intorno alla casella di testo mentre è attivo
- 9. Rilevamento del "valore" del campo di testo di input dopo un evento keydown nel campo di testo?
- 10. Twitter bootstrap campo di inserimento modale attenzione
- 11. UI Test eliminazione del testo nel campo di testo
- 12. Campo HTML Testo di input Campo segnaposto
- 13. Come cambio il colore del cursore del testo in un campo di input in IE?
- 14. L'ampiezza del testo VIM non ha effetto
- 15. Selenium Webdriver: immissione del testo nel campo di testo
- 16. Problema di rendering dell'input di testo con Twitter Bootstrap
- 17. Come verificare l'immissione del campo di testo in tempo reale?
- 18. come modificare il colore di sfondo del campo di testo UISearchBar e il colore del testo in ios8
- 19. Pubblicare su Tumblr usando oAuth e C#
- 20. Modifica lo sfondo del campo di testo di UISearchBar
- 21. Come allineare il testo di input del campo giusto?
- 22. Come si comprendono gli hashtag all'interno del testo del link di condivisione di Twitter?
- 23. Twitter-Bootstrap: modulo di accesso in navbar
- 24. Valore di dissolvenza del testo all'interno del campo di testo usando jQuery
- 25. Actionscript: come ruotare un campo di testo?
- 26. Con Twitter Bootstrap, come posso personalizzare il colore del testo h1 di una pagina e lasciare che le altre pagine siano predefinite?
- 27. CSS3: sfondo incandescente sul link-hover (non a incandescenza del testo)
- 28. utilizzando jquery scroll infinito per caricare automaticamente il numero impostato di pagine tumblr
- 29. JSON - Campo di accesso denominato asterisco '*'
- 30. Accesso a una lista di caselle di testo
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