Próbuję użyć :after
pseudoelementu CSS na input
polu, ale to nie działa. Jeśli używam go z span
, działa OK.
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>
To działa (umieszcza buźkę po „buu!” I przed „trochę więcej”)
<span class="mystyle">buuu!</span>a some more
To nie działa - tylko koloruje niektóreValue na czerwono, ale nie ma buźki.
<input class="mystyle" type="text" value="someValue">
Co ja robię źle? powinienem użyć innego pseudo-selektora?
Uwaga: nie mogę dodać span
wokół siebie input
, ponieważ jest on generowany przez kontrolę innej firmy.
html
css
pseudo-element
css-content
matra
źródło
źródło
border-color
zinput
zamiast. Uważam, że to przyciąga więcej uwagi.Odpowiedzi:
:after
i:before
nie są obsługiwane w Internet Explorerze 7 i niższych, na żadnych elementach.Nie jest również przeznaczony do stosowania na zastąpionych elementach, takich jak elementy formularza (dane wejściowe) i elementy obrazu .
Innymi słowy jest to niemożliwe z czystym CSS.
Jednak jeśli używasz jquery , możesz użyć
Dokumenty API w .after
Aby dołączyć treść za pomocą javascript. Działa to we wszystkich przeglądarkach.
źródło
:after
w ogóle, choć nie obsługuje albo:before
czy:after
na wejściach.:after
i:before
pseudoelementy, można je umieszczać tylko na elementach kontenerowych. Dlaczego? Ponieważ są dołączone do tego konkretnego elementu.input
nie jest pojemnikiem.button
na przykład dlatego możesz je założyć. Działa zgodnie z oczekiwaniami. Specyfikacja faktycznie mówi: przed i po zawartości drzewa dokumentu elementu Wyraźnie mówi TREŚĆ . Zatem element musi być kontenerem.:before
i:after
renderować w pojemnikui <wejście> nie może zawierać innych elementów.
Pseudoelementy można zdefiniować (lub lepiej powiedzieć, że są obsługiwane tylko) na elementach kontenera. Ponieważ sposób ich renderowania znajduje się w samym kontenerze jako element potomny.
input
nie mogą zawierać innych elementów, dlatego nie są obsługiwane. Zbutton
drugiej strony, który jest również elementem formularza, obsługuje je, ponieważ jest to kontener innych podelementów.Jeśli pytasz mnie, jeśli niektóre przeglądarka nie wyświetla tych dwóch pseudo-elementów na elementy non-kontenerowych, jest to błąd i niestandardowym zgodności. Specyfikacja bezpośrednio mówi o zawartości elementu ...
Specyfikacja W3C
Jeśli uważnie przeczytać specyfikację faktycznie mówi, że są one wstawiane wewnątrz elementu zawierającego:
Widzieć? zawartość drzewa dokumentu elementu . Jak rozumiem, oznacza to wewnątrz pojemnika.
źródło
[required]::before { content "*"; color: red; }
: P<input type="submit" value="Send"/>
, użyj<button type="submit">Send</button>
zamiast tego. Prezentacja jest identyczna, ale<button>
jest pojemnikiem, a zatem obsługuje:before
i:after
.<hr />
? Myślałem, że to nie jest element kontenera, ale może renderować:after
i:before
jsfiddle.net/Uf88j/1p
ih1
treść znajduje się w tagu, więc przed / po pojawiają się również wewnątrz. Elementy takie jakinput
ihr
:: przed i: po nadal pojawiałyby się przed lub po treści, ale nie dotyczy to żadnego kontenera (szczególnie dlainput
). input: selected: before jest powszechnie używany do wskazania, że pola wyboru są sprawdzane przez css.Dziwnie, działa z niektórymi rodzajami danych wejściowych. Przynajmniej w Chrome
działa dobrze, tak samo jak
To tylko
type=text
niektóre inne, które nie działają.źródło
Oto inne podejście (zakładając, że masz kontrolę nad HTML): dodaj puste miejsce
<span></span>
po danych wejściowych i celuj w CSS za pomocąinput.mystyle + span:after
Używam tego podejścia w AngularJS, ponieważ automatycznie doda
.ng-invalid
klasy do<input>
elementów formularza i do formularza, ale nie do<label>
.źródło
input:hover+span:after{color: blue}
. Głosuj.:before
i:after
są stosowane w kontenerze, co oznacza, że można go używać do elementów z tagiem końcowym.Na marginesie, elementy, które samozamykają się (takie jak img / hr / input) są również znane jako „Elementy zamienione”, ponieważ są one zastępowane odpowiednią treścią. „Obiekty zewnętrzne” z powodu braku lepszego terminu. Lepiej przeczytaj tutaj
źródło
Użyłem
background-image
do stworzenia czerwonej kropki dla wymaganych pól.Zobacz na Codepen
źródło
Nie możesz umieścić pseudo elementu w elemencie wejściowym, ale możesz umieścić element cienia, jak symbol zastępczy!
Aby pracować w innych przeglądarkach, wykorzystania
:-moz-placeholder
,::-moz-placeholder
a:-ms-input-placeholder
w różnych selektorów . Nie można pogrupować selektorów, ponieważ jeśli przeglądarka nie rozpozna selektora, unieważnia całą instrukcję.AKTUALIZACJA : Powyższy kod działa tylko z preprocesorem CSS (SASS, LESS ...), bez użycia preprocesorów:
źródło
glyphicon-search
bez dotykania znaczników.Pseudoelementy, takie jak
:after
,:before
są tylko dla elementów kontenera. Elementy otwarcia i zamknięcia w jednym miejscu, takim jak<input/>
,<img>
itp nie są elementami pojemnik, a zatem elementy pseudo nie są obsługiwane. Po zastosowaniu pseudoelementu do elementu kontenera, takiego jak<div>
i po sprawdzeniu kodu (patrz obrazek) możesz zrozumieć, co mam na myśli. W rzeczywistości pseudoelement jest tworzony wewnątrz elementu kontenera. Nie jest to możliwe w przypadku<input>
lub<img>
źródło
Działające rozwiązanie w czystym CSS:
Sztuką jest założenie, że za polem tekstowym jest element dom.
(*) Ograniczone rozwiązanie:
Ale w większości przypadków znamy nasz kod, więc to rozwiązanie wydaje się wydajne i 100% CSS i 0% jQuery.
źródło
input#myTextField ~ span:before {
o wiele lepiej, ale rozpiętość powinna mieć klasę, która powinna być bardziej wyraźna, jak.tick
lub.icon
Znalazłem ten post, ponieważ miałem ten sam problem, było to rozwiązanie, które działało dla mnie. W przeciwieństwie do zastąpienia wartości wejściowej, po prostu usuń ją i absolutnie umieść za nią rozpiętość o takim samym rozmiarze, rozpiętość może mieć przypisaną
:before
pseudo klasę z wybraną czcionką ikony.źródło
Największym nieporozumieniem jest znaczenie słów
before
iafter
. Oni nie odnoszą się do samego elementu, lecz do zawartości w elemencie. Takelement:before
jest przed treścią ielement:after
po treści, ale oba nadal znajdują się w oryginalnym elemencie.input
Element ma żadnej zawartości w widoku CSS, a więc nie ma:before
lub:after
zawartość pseudo. Dotyczy to wielu innych pustych lub zastąpionych elementów.Nie ma pseudoelementu odnoszącego się do elementu zewnętrznego .
W innym wszechświecie te pseudoelementy można by nazwać czymś innym, aby uczynić to rozróżnienie wyraźniejszym. I ktoś mógł nawet zaproponować pseudoelement, który naprawdę jest poza tym elementem. Jak dotąd nie ma to miejsca w tym wszechświecie.
źródło
hr
zawsze był niejednoznaczny z punktu widzenia CSS, chociaż widać to bardziej w dyskusji o kolorze.Zgodnie z uwagą zawartą w specyfikacji CSS 2.1, specyfikacja „nie definiuje w pełni interakcji: przed i po po zastąpieniu elementów (takich jak IMG w HTML). Zostanie to bardziej szczegółowo określone w przyszłej specyfikacji. ” Chociaż
input
tak naprawdę nie jest już zamienionym elementem, podstawowa sytuacja się nie zmieniła: efekt:before
i:after
na nią w nieokreślony i ogólnie nie ma wpływu.Rozwiązaniem jest znalezienie innego podejścia do problemu, który próbujesz rozwiązać w ten sposób. Umieszczenie wygenerowanej treści w kontrolce wprowadzania tekstu byłoby bardzo mylące: dla użytkownika wydaje się, że jest częścią wartości początkowej w kontrolce, ale nie można go modyfikować - więc wydaje się, że jest to coś wymuszonego na początku kontrola, ale nie zostanie ona przesłana jako część danych formularza.
źródło
input
elementów, po prostu nieokreślonych i zależnych od przeglądarki.Jak wyjaśnili inni,
input
s są jakby pustymi elementami, więc większość przeglądarek nie pozwala na ich generowanie::before
ani::after
pseudoelementy.Grupa robocza CSS rozważa jednak wyraźne zezwolenie,
::before
a::after
jeśli tak, to nainput
pewnoappearance: none
.Od https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html ,
źródło
spróbuj dalej:
źródło
Musisz mieć jakieś otoczenie wokół wejścia, aby użyć pseudoelementu przed lub po. Oto skrzypce, które ma przedtem na otoku otoki wejścia, a następnie umieszcza przedtem wewnątrz wejścia - a przynajmniej tak to wygląda. Oczywiście jest to obejście, ale skuteczne w uścisku i nadaje się do reagowania. Możesz łatwo zrobić to później, jeśli chcesz umieścić inną treść.
Working Fiddle
Znak dolara wewnątrz pseudoelementu: http://jsfiddle.net/kapunahele/ose4r8uj/1/
HTML:
CSS:
źródło
Jeśli próbujesz stylizować element wejściowy za pomocą: przed i po, istnieje szansa, że próbujesz naśladować efekty innych zakresów, div, a nawet elementów na stosie CSS.
Jak wskazuje odpowiedź Roberta Koritnika: przed i po można stosować tylko do elementów kontenera a elementy wejściowe nie są kontenerami.
JEDNAK, HTML 5 wprowadził element przycisku , który jest kontenerem i zachowuje się jak element wejściowy [type = "Submit | reset"].
źródło
Podsumowanie
To nie działa z
<input type="button">
, ale działa dobrze<input type="checkbox">
.Skrzypce : http://jsfiddle.net/gb2wY/50/
HTML :
CSS :
źródło
:before
i:after
działa tylko w przypadku węzłów, które mogą mieć węzły potomne, ponieważ wstawiają nowy węzeł jako pierwszy lub ostatni węzeł.źródło
Odkryłem, że możesz to zrobić w następujący sposób:
Pokaż fragment kodu
Musisz mieć rodzica div, który pobierze dopełnienie i: po. Pierwszy rodzic musi być względny, a drugi div powinien być absolutny, aby można było ustawić pozycję po.
źródło
Mam inny pomysł, użyj tego zamiast:
źródło