I segnaposto, quegli elementi di testo spesso ombreggiati all'interno di un input, possono essere difficili da definire. Fortunatamente abbiamo trovato una soluzione CSS breve ma efficace per modellare il testo segnaposto del tuo input in qualsiasi colore e opacità desideri. Continua a leggere per il codice.
Modifica del colore del testo segnaposto
Iniziamo con un semplice input e del testo segnaposto, per questo esempio utilizzeremo la parola "cerca" ma tu puoi usare quello che vuoi. L'HTML di base è il seguente:
HTML
Il testo segnaposto di input (e textarea) ha per impostazione predefinita un colore grigio chiaro, tuttavia, possiamo modificarlo con poche righe di CSS. Qui coloreremo l'ingresso testo rosso utilizzando un nome di colore HTML, ma sarà sufficiente qualsiasi metodo di colore (HEX, RGB, HSL).
CSS
::-webkit-input-placeholder ( /* Chrome */ color: red; ) :-ms-input-placeholder ( /* IE 10+ */ color: red; ) ::-moz-placeholder ( /* Firefox 19 + */ colore: rosso; opacità: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ colore: rosso; opacità: 1; )Tieni presente che è importante includere i diversi prefissi dei fornitori per supportare il maggior numero di browser possibile. Solo il testo segnaposto di input di Firefox ha per impostazione predefinita una leggera trasparenza, quindi non è necessario impostare la proprietà di opacità su IE o Chrome.
Modifica del colore del testo di messa a fuoco del segnaposto
Va bene, abbiamo cambiato con successo il colore del testo segnaposto in rosso, ma sarebbe bello se succedesse qualcosa quando un utente fa clic all'interno del nostro input. Utilizzando le stesse proprietà CSS con prefisso del fornitore, possiamo modificare l'opacità del testo segnaposto di input a fuoco.
CSS
input ( contorno: nessuno; riempimento: 12px; raggio bordo: 3px; bordo: 1px nero pieno; ) ::-webkit-input-placeholder ( /* Chrome */ colore: rosso; transizione: opacità 250 ms easy-in-out ; ) :focus::-webkit-input-placeholder ( opacità: 0,5; ) :-ms-input-placeholder ( /* IE 10+ */ colore: rosso; transizione: opacità 250 ms easy-in-out; ) :focus :-ms-input-placeholder ( opacità: 0.5; ) ::-moz-placeholder ( /* Firefox 19+ */ colore: rosso; opacità: 1; transizione: opacità 250ms facilità-in-out; ) :focus:: -moz-placeholder ( opacità: 0.5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ colore: rosso; opacità: 1; transizione: opacità 250ms facilità-in-out; ) :focus:-moz-placeholder (opacità: 0,5; )Nell'esempio sopra abbiamo inserito alcuni stili di base sull'input stesso e aggiunto una transizione sull'opacità per rendere l'esperienza un po' più gradevole. Dai un'occhiata alla demo e sperimenta altre proprietà e transizioni CSS.
Il segnaposto è una pseudo-classe o uno pseudo-elemento responsabile della visualizzazione del nome del campo. Fondamentalmente si tratta di un tag (chiamiamolo così per semplicità) in cui inserisci una parola e l'utente la vede al suo interno. Una sorta di suggerimento o nome per ciascun campo del modulo.
Ogni browser gestisce questo tag in modo diverso e il suo stile lascia molto a desiderare. Per modificare gli stili predefiniti, aggiungi semplicemente un paio di righe di codice al file degli stili. Non c'è niente di complicato.
Bisogna però tenere presente che non tutto possiamo cambiare.
Tra la varietà di stili, in questo caso abbiamo a disposizione quanto segue:
- font-weight: impostazione del peso del testo
- dimensione carattere: seleziona la dimensione del testo
- font-family: selezione del carattere
- sfondo: sfondo e immagine di sfondo
- colore: colore del testo
- word-spacing: imposta la spaziatura tra le parole
- letter-spacing: imposta la spaziatura tra le lettere
- decorazione del testo: scelta della decorazione delle parole. Sottolineato, barrato, ecc.
- vertical-align: imposta l'allineamento verticale
- text-transform: scelta di modificare il testo. Tutto in maiuscolo o minuscolo, ecc.
- line-height: spaziatura tra le righe
- text-indent: imposta un rientro sinistro per la prima riga di un paragrafo
- text-overflow - scelta di visualizzare il testo che non rientra nel blocco (nascondi o ritaglia e aggiungi i puntini di sospensione)
- opacità: seleziona la trasparenza dell'elemento
Ora che abbiamo compreso gli stili disponibili, possiamo iniziare a progettare, per questo aggiungeremo i seguenti stili:
::-webkit-input-segnaposto ( color: #2cb04d; )
::-moz-placeholder ( color: #2cb04d; )/* Firefox 19+ */
:-moz-placeholder ( color: #2cb04d; ) /*Firefox 18- */
:-ms-input-placeholder ( colore: #2cb04d; )
Dopo aver aggiunto queste righe, il colore dei nomi all'interno dei campi del modulo cambierà e sarà lo stesso in ogni browser. Puoi aggiungere ulteriori stili qui.
Ad esempio, questo stile
::-webkit-input-placeholder (colore: #2cb04d; dimensione carattere: 1,5em; peso carattere: 600;)
::-moz-placeholder (colore:#2cb04d; dimensione carattere:1.5em; peso carattere:600;) /*Firefox 19+*/
:-moz-placeholder (colore:#2cb04d; dimensione carattere:1.5em; peso carattere:600;) /*Firefox 18-*/
:-ms-input-placeholder (colore: #2cb04d; dimensione carattere: 1,5em; peso carattere: 600;)
Aggiungi colore, testo di grandi dimensioni e medio grassetto. Se aggiungi proprietà aggiuntiva —
text-overflow:ellissi il testo verrà tagliato per adattarlo al campo e alla fine verranno aggiunti i puntini di sospensione.
C'è un'altra proprietà interessante: grazie alla comparsa dell'animazione in CSS (stili), puoi configurare bellissimi nascondigli quando posizioni il cursore in un campo. In precedenza, questo veniva fatto utilizzando js (script)
Input::-webkit-input-placeholder (opacità: 1; transizione: opacità 0,3 s facile;)
.input::-moz-placeholder (opacità: 1; transizione: opacità 0,3 s facilità;)
.input:-moz-placeholder (opacità: 1; transizione: opacità 0,3 s facilità;)
.input:-ms-input-placeholder (opacità: 1; transizione: opacità 0,3 s facilità;)
.input:focus::-webkit-input-placeholder (opacità: 0; transizione: opacità 0,3 s facilità;)
.input:focus::-moz-placeholder (opacità: 0; transizione: opacità 0,3 s facilità;)
.input:focus:-moz-placeholder (opacità: 0; transizione: opacità 0,3s facilità;)
.input:focus:-ms-input-placeholder (opacità: 0; transizione: opacità 0,3 s facilità;)
L'aggiunta di tali stili consentirà al segnaposto di svanire gradualmente quando il cursore viene posizionato nel campo
.input è la classe dell'elemento del modulo. Affinché gli stili funzionino, il codice del campo del modulo dovrebbe assomigliare a questo:
Oppure puoi usare la classe elemento. In questo modo puoi impostare stili diversi per ogni modulo.
.contacts-form form input::-webkit-input-placeholder (colore: #2cb04d; dimensione carattere: 1,5em; peso carattere: 600;)
.contacts-form form input::-moz-placeholder (colore: #2cb04d; dimensione carattere: 1.5em; peso carattere: 600;)/*Firefox 19+*/
.contacts-form form input:-moz-placeholder (colore: #2cb04d; dimensione carattere: 1.5em; peso carattere: 600;)/*Firefox 18-*/
.contacts-form form input:-ms-input-placeholder (colore: #2cb04d; dimensione carattere: 1,5em; peso carattere: 600;)
In questi semplici modi puoi creare un design del modulo davvero bello.
In genere l'attributo segnaposto su input e textarea viene utilizzato per fornire un invito all'azione all'interno di tali elementi. In questo post descriverò diverse opzioni per definire lo stile del testo dei segnaposto, nonché le opzioni per la loro animazione
Pertanto, il colore del testo del nostro segnaposto può essere modificato utilizzando, ad esempio, il seguente insieme di regole CSS:
::-webkit-input-placeholder ( colore : #c0392b ;) ::-moz-placeholder ( colore : #c0392b ;) /* Firefox 19+ */ :-moz-placeholder ( colore : #c0392b ;) /* Firefox 18- */ :-ms-input-placeholder ( colore : #c0392b ;)
La lunghezza del codice per applicare uno stile a una proprietà così semplice è dovuta alla mancanza di uno standard comune, pertanto ogni browser ha implementato il supporto per lo stile dei segnaposto a modo suo.
Inoltre, non tutti sono supportati proprietà CSS. Ecco un elenco delle proprietà esattamente supportate:
carattere (e correlati)
background (e correlati)
colore
spaziatura delle parole
spaziatura delle lettere
decorazione del testo
allineamento verticale
trasformazione del testo
altezza della linea
rientro del testo
overflow del testo
opacità
Accade anche che il testo segnaposto “si estenda” oltre la larghezza dell'elemento input o textarea (un caso comune per dispositivi mobili). Allo stesso tempo, viene automaticamente tagliato antiestetico.
Una proprietà CSS come text-overflow: ellipsis ci aiuterà a risolvere questo problema, aggiungendo dei puntini di sospensione estetici all'area ritagliata del segnaposto. Negli stili scriviamo così:
input [ segnaposto ] ( text-overflow : puntini di sospensione ;) input ::-moz-placeholder ( text-overflow : puntini di sospensione ;) input :-moz-placeholder ( text-overflow : puntini di sospensione ;) input :-ms-input-placeholder ( overflow del testo: puntini di sospensione ;)
Per aggiungere ancora più estetica ai nostri segnaposto, è possibile aggiungere l'effetto di nasconderli quando l'elemento corrispondente viene messo a fuoco.
Alcuni esempi di tale occultamento con elementi di animazione:
/* modifica graduale della trasparenza del segnaposto quando è attivo */.input ::-webkit-input-placeholder ( opacità : 1 ; transizione : opacità 0,3s facilità ;) .input ::-moz-placeholder ( opacità : 1 ; transizione : opacità 0,3s facilità ;).input :-moz- segnaposto (opacità: 1; transizione: opacità 0,3 s facilità;).input:-ms-input-placeholder (opacità: 1; transizione: opacità 0,3 s facilità;).input (opacità: 0; transizione: opacità 0,3 s facilità;). ) .input :focus::-moz-placeholder ( opacità : 0 ; transizione : opacità 0,3s facilità ;).input :focus:-moz-placeholder ( opacità : 0 ; transizione : opacità 0,3s facilità ;).input :focus :-ms-input-placeholder (opacità: 0; transizione: opacità 0,3 s facilità;) /* sposta il segnaposto a destra quando è focalizzato */.input ::-webkit-input-placeholder ( text-indent : 0px ; transizione : text-indent 0.3s easy ;) .input ::-moz-placeholder ( text-indent : 0px ; transizione : text-indent 0.3s easy ;).input:-moz-placeholder (text-indent: 0px; transizione: text-indent 0.3s easy;).input:-ms-input-placeholder (text-indent: 0px; transizione: text-indent 0.3s easy ;).ingresso :focus::-webkit-input-placeholder(rientro testo: 500px; transizione: rientro testo 0,3 s facile;).input:focus::-moz-placeholder (rientro testo: 500px; transizione: rientro testo 0,3 s facile;).input:focus:- moz-placeholder (rientro testo: 500px; transizione: rientro testo 0,3 s facile;) .input:focus:-ms-input-placeholder (rientro testo: 500px; transizione: rientro testo 0,3 s facile;) /* sposta il segnaposto verso il basso quando è focalizzato */.input ::-webkit-input-placeholder ( altezza linea: 20px ; transizione: altezza linea 0,5 s facile ;) .input ::-moz-placeholder ( altezza linea: 20px ; transizione: altezza linea 0,5 s facile ;).input:-moz-placeholder (altezza della linea: 20px; transizione: altezza della linea 0,5 s facile;).input:-ms-input-placeholder (altezza della linea: 20px; transizione: altezza della linea 0,5 s facile ;).ingresso :focus::-webkit-input-placeholder(altezza della linea: 100px; transizione: altezza della linea 0,5 s facile;).input:focus::-moz-placeholder (altezza della linea: 100px; transizione: altezza della linea 0,5 s facile;).input:focus:- moz-placeholder (altezza della linea: 100px; transizione: altezza della linea 0,5 s facile;).input: focus:-ms-input-placeholder (altezza della linea: 100px; transizione: altezza della linea 0,5 s facile;)
Finiamo qui.
Il segnaposto è un elemento di un campo di input in cui è possibile inserire una descrizione comando. Quando l'utente inizia a inserire i dati, il testo di supporto scompare per non interferire. Ogni browser ha la propria opinione su come dovrebbe essere visualizzato questo elemento e talvolta gli stili predefiniti interrompono l'intero design. Per gestirli è necessario utilizzare una speciale regola segnaposto CSS.
Dov'è il segnaposto?
Il problema è che il tooltip del campo di input è nascosto in modo sicuro nello shadow DOM e non è così facile da raggiungere. Per questo viene utilizzato uno speciale ::segnaposto non standard. Con il suo aiuto puoi gestire le proprietà del tooltip.
Lo stile di un segnaposto nei CSS è simile al seguente:
Input::segnaposto ( colore: rosso; opacità: 1; stile carattere: corsivo; )
Supporto del browser
Lo pseudoelemento segnaposto CSS è gestito bene da tutti browser moderni, e per supportare i browser più vecchi puoi utilizzare i prefissi:
- ::-webkit-input-placeholder - per browser webkit (Safari, Chrome, Opera);
- ::-moz-placeholder - per Browser Firefox versione precedente 19;
- :-moz-placeholder - per Firefox più vecchio;
- :-ms-input-placeholder - per Internet Explorer sopra la versione 10.
Come puoi vedere, vecchio Browser Mozilla, così come IE, considerano il segnaposto una pseudo-classe CSS, non uno pseudo-elemento. Non discutiamo con loro, terremo semplicemente conto di questo aspetto quando stiliamo il campo di input.
Opzioni di stile
Puoi impostare le seguenti opzioni per lo pseudo-elemento segnaposto nei CSS:
- sfondo: il gruppo di blocchi tooltip si applica all'intero campo di input. Puoi impostare non solo il colore (colore di sfondo), ma anche l'immagine (immagine di sfondo).
- colore del testo - colore;
- trasparenza - opacità;
- sottolineare, sopralineare o cancellare - decorazione del testo;
- case - trasformazione del testo;
- trattini interni - imbottitura. Non supportato da tutti i browser. Come per gli elementi in linea, il riempimento superiore e inferiore viene ignorato.
- visualizzazione dei caratteri: proprietà del gruppo di caratteri, altezza della riga e vari rientri (rientro del testo, spaziatura delle lettere, spaziatura delle parole);
- allineamento verticale in linea - allineamento verticale;
- tagliare il testo quando il contenitore trabocca - text-overflow.
A fuoco
Per impostazione predefinita, la descrizione comando scompare dal campo di input solo se viene inserito almeno un carattere. Ma il segnaposto ti consente di implementare immediatamente la scomparsa quando ti concentri sul campo. Per fare ciò è necessario combinarlo con la pseudo-classe:focus.
Input:focus::segnaposto ( colore: trasparente; )
In alcuni browser è possibile animare le modifiche in una serie di proprietà segnaposto utilizzando l'istruzione di transizione.
Input::placeholder ( colore: nero; transizione: colore 1s; ) input:focus::placeholder ( colore: bianco; )
Nel browser Google Cromo Quando ci si concentra su un campo di questo tipo, il colore del suggerimento cambierà gradualmente entro un secondo.
Il segnaposto è un elemento di un campo di input in cui è possibile inserire una descrizione comando. Quando l'utente inizia a inserire i dati, il testo di supporto scompare per non interferire. Ogni browser ha la propria opinione su come dovrebbe essere visualizzato questo elemento e talvolta gli stili predefiniti interrompono l'intero design. Per gestirli è necessario utilizzare una speciale regola segnaposto CSS.
Dov'è il segnaposto?
Il problema è che il tooltip del campo di input è nascosto in modo sicuro nello shadow DOM e non è così facile da raggiungere. Per fare ciò, viene utilizzato uno speciale pseudoelemento CSS::placeholder non standard. Con il suo aiuto puoi gestire le proprietà del tooltip.
Ti interesserà:
Lo stile di un segnaposto nei CSS è simile al seguente:
input::placeholder ( colore: rosso; opacità: 1; stile carattere: corsivo; ) 
Supporto del browser
Lo pseudo-elemento segnaposto CSS è gestito bene da tutti i browser moderni e per supportare i browser più vecchi è possibile utilizzare i seguenti prefissi:
- ::-webkit-input-placeholder - per browser webkit (Safari, Chrome, Opera);
- ::-moz-placeholder - per browser Firefox superiori alla versione 19;
- :-moz-placeholder - per Firefox più vecchio;
- :-ms-input-placeholder - per Internet Explorer superiore alla versione 10.
Come puoi vedere, i browser Mozilla più vecchi, così come IE, considerano il segnaposto una pseudo-classe CSS e non uno pseudo-elemento. Non discutiamo con loro, terremo semplicemente conto di questo aspetto quando stiliamo il campo di input.
Opzioni di stile
Puoi impostare le seguenti opzioni per lo pseudo-elemento segnaposto nei CSS:
- background - gruppo di proprietà dello sfondo. Lo sfondo del blocco dei suggerimenti si estende all'intero campo di input. Puoi impostare non solo il colore (colore di sfondo), ma anche l'immagine (immagine di sfondo).
- colore del testo - colore;
- trasparenza - opacità;
- sottolineare, sopralineare o cancellare - decorazione del testo;
- case - trasformazione del testo;
- trattini interni - imbottitura. Non supportato da tutti i browser. Come per gli elementi in linea, il riempimento superiore e inferiore viene ignorato.
- visualizzazione dei caratteri: proprietà del gruppo di caratteri, altezza della riga e vari rientri (rientro del testo, spaziatura delle lettere, spaziatura delle parole);
- allineamento verticale in linea - allineamento verticale;
- tagliare il testo quando il contenitore trabocca - text-overflow.
Input1::segnaposto (immagine di sfondo: gradiente lineare (lime, blu); colore: bianco; ) .input2::segnaposto (decorazione del testo: riga passante; colore: viola; peso carattere: grassetto; ) .input3 ::placeholder (dimensione carattere: 16px; spaziatura tra lettere: 10px; ) .input4::placeholder ( sfondo: marrone; colore: bianco; testo in eccesso: puntini di sospensione; )
A fuoco
Per impostazione predefinita, la descrizione comando scompare dal campo di input solo se viene inserito almeno un carattere. Ma lo pseudoelemento segnaposto CSS ti consente di implementare immediatamente la dissolvenza quando ti concentri sul campo. Per fare ciò è necessario combinarlo con la pseudo-classe:focus.
input:focus::placeholder ( colore: trasparente; )
In alcuni browser è possibile animare le modifiche in una serie di proprietà segnaposto utilizzando l'istruzione di transizione.
input::placeholder ( colore: nero; transizione: colore 1s; ) input:focus::placeholder ( colore: bianco; )
IN browser di Google Il colore della descrizione comando di Chrome quando ci si concentra su un campo di questo tipo cambierà gradualmente entro un secondo.