Jak mogę użyć pseudoelementu CSS: before {content: ''}, aby wpłynąć na element <option>?

Jeśli mam listę optonów, jak mogę użyć pseudoelementu CSS: before {content: ''}, aby wpłynąć na <option>? Poniżej znajdują się trzy opcje, które chciałbym wstawić przed każdym tekstem.Jak mogę użyć pseudoelementu CSS: before {content: ''}, aby wpłynąć na element <option>?

Wiem, że można to zrobić z użyciem javascript/jQuery, ale czy jest to możliwe z CSS?

<html> 
<head> 
    <style> 

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

    </style> 


</head> 
<body> 

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


</body> 
</html>

Źródło

2012-02-08 cwd

Jak wspomniano w j08691 w jego odpowiedzi, ': before' nie jest nowy w CSS3. Jest również nazywany "pseudoelementem" - "pseudo" tag w pierwotnym pytaniu prawdopodobnie istnieje, ponieważ nie można znaleźć [pseudo-selektora] - to dlatego, że tag został spalony. – BoltClock

Pseudoelementy faktycznie poprzedzają/dołączają węzeł potomny do elementu, więc nie będzie działać na żadnym elemencie, który nie może zawierać węzłów potomnych.

Byłoby (w przybliżeniu) równowartość robi:

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

Jeśli chcesz zaktualizować wartość tekstową, trzeba będzie użyć JavaScript.

Źródło

2012-02-08 17:34:03

Pseudoelementy * mogą * także wpływać na puste elementy (wstawianie treści przed lub po pustej treści), a elementy 'option' nie są nawet puste. –

Wygląda na to, że na razie nie można. Zgodnie z W3, "Ta specyfikacja nie w pełni definiuje interakcję: before i: after z zastąpionymi elementami (takimi jak IMG w HTML)". Niektóre elementy są zastąpione <IMG> przywieszki wtyczki (< obiektów > tags) i elementów formy (<przycisk>, <Textarea>, < wejście > i < wybrać > znaczniki).

Można to jednak zrobić za pomocą JavaScript. Oh i BTW, content :,: before, and: after są w rzeczywistości CSS 2.1.

Źródło

2012-02-08 17:32:09 j08691

': before' nie jest nowy w CSS3 - jednak zapis dwukropka' :: before' jest. Bajka mówi, że powinniśmy nadal używać notacji z jednym dwukropkiem, aby utrzymać użytkowników IE8 na zdrowiu, ale dygresja. – BoltClock

Należy również zauważyć, że generowanie treści za pomocą pseudoelementów ': before' i': after' działa * dla elementów '

Jak mogę użyć pseudoelementu CSS: before {content: ''}, aby wpłynąć na element <option>?

Odpowiedz