Come posso utilizzare lo pseudo-elemento CSS: prima che {content: ''} abbia effetto su un elemento ?

Se ho un elenco di optons, come posso utilizzare lo pseudo-elemento CSS: before {content: ''} per influenzare lo <option>? Di seguito ci sono tre opzioni e vorrei inserire il testo prima di ognuna.Come posso utilizzare lo pseudo-elemento CSS: prima che {content: ''} abbia effetto su un elemento ?

So che questo può essere fatto con javascript/jQuery, ma è possibile con i CSS?

<html> 
<head> 
    <style> 

     option::before { 
      content: "sandy - " 
     } 

    </style> 


</head> 
<body> 

<select> 
    <option>beach</option> 
    <option>field</option> 
    <option>carpet</option> 
</select> 


</body> 
</html>

fonte

2012-02-08 cwd

Come menzionato da j08691 nella sua risposta, ': before' non è nuovo per i CSS3. È anche chiamato "pseudo-elemento" - il tag "pseudo" nella domanda originale è probabilmente lì perché non è stato possibile trovare [pseudo-selettore] - perché il tag è stato masterizzato. – BoltClock

Gli pseudo-elementi ::before e ::after in realtà antepongono/aggiungono un nodo figlio all'elemento, quindi questo non funzionerà su alcun elemento che non può contenere nodi figlio.

Sarebbe (approssimativamente) l'equivalente di fare:

<option><span>sandy - </span>beach</option>

Se si desidera aggiornare il valore di testo, è necessario utilizzare JavaScript.

fonte

2012-02-08 17:34:03

Gli pseudo-elementi * possono * influenzare anche gli elementi vuoti (inserendo il contenuto prima o dopo il contenuto vuoto), e gli elementi 'option' non sono nemmeno vuoti. –

Sembra che per ora, non è possibile. Secondo lo W3, "Questa specifica non definisce completamente l'interazione di: prima e: dopo con elementi sostituiti (come IMG in HTML)". Alcuni elementi sostituiti sono <img> tag, plugin (<oggetto> tag), ed elementi di moduli (<pulsante>, <textarea>, <ingresso> e <selezionare> tag).

È tuttavia possibile farlo con JavaScript. Oh e BTW, content :,: before, and: after sono in realtà CSS 2.1.

fonte

2012-02-08 17:32:09 j08691

': before' non è nuovo per CSS3 - tuttavia, la notazione doppio :: due' :: before' è. La favola dice che dovremmo continuare a usare la notazione a due punti per mantenere sani gli utenti di IE8, ma sto divagando. – BoltClock

Si noti inoltre che la generazione del contenuto con gli 'pseudo-elementi': before' e ': after' * funziona * per gli elementi' '

I test mostrano che l'unico browser che supporta effettivamente la generazione di contenuto con: before (o :: before) sui tag OPTION è Firefox. Tutti gli altri grandi browser NON lo accettano; questo, come qualcuno ha affermato nell'altra domanda collegata, è conforme allo standard, in quanto NON indica esplicitamente in che modo il contenuto generato deve essere gestito in elementi sostituiti come OPTION.

Dall'altro lato, a mio avviso il fatto che, quando si genera contenuto con opzione :: before funziona, non influisce in alcun caso sul tag SELECT corretto e MOLTO UTILE; il primo esempio che mi viene in mente è quando vuoi mostrare le opzioni che sono elementi di un albero, e così tu vuoi, come aumentare la chiarezza dell'interfaccia, indentarle in base al loro livello nell'albero.

In tal caso, si consiglia di farlo SOLO quando l'opzione viene visualizzata nel menu a discesa aperto, mentre il rientro sarebbe solo un fastidio se mostrato nella selezione quando il menu a discesa è chiuso.

fonte

2016-05-12 12:30:25 Shores

Come posso utilizzare lo pseudo-elemento CSS: prima che {content: ''} abbia effetto su un elemento ?

risposta

Problemi correlati