Czy mogę użyć pseudoelementu: before lub: after w polu wejściowym?

Próbuję użyć :afterpseudoelementu CSS na inputpolu, 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ć spanwokół siebie input, ponieważ jest on generowany przez kontrolę innej firmy.

:afteri :beforenie 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ć

$(".mystyle").after("add your smiley here");

Dokumenty API w .after

Aby dołączyć treść za pomocą javascript. Działa to we wszystkich przeglądarkach.

:beforei :afterrenderować w pojemniku

i <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. inputnie mogą zawierać innych elementów, dlatego nie są obsługiwane. Z buttondrugiej 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:

Autorzy określają styl i lokalizację generowanej treści za pomocą pseudoelementów: before i: after. Jak wskazują ich nazwy, pseudoelementy: before i: after określają lokalizację zawartości przed i po zawartości drzewa dokumentu elementu. Właściwość „content” w połączeniu z tymi pseudoelementami określa, co zostanie wstawione.

Widzieć? zawartość drzewa dokumentu elementu . Jak rozumiem, oznacza to wewnątrz pojemnika.

Dziwnie, działa z niektórymi rodzajami danych wejściowych. Przynajmniej w Chrome

<input type="checkbox" />

działa dobrze, tak samo jak

<input type="radio" />

To tylko type=textniektóre inne, które nie działają.

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

.field_with_errors {
  display: inline;
  color: red;
}
.field_with_errors input+span:after {
  content: "*"
}

<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
  <input type="text" /><span></span> 
</div>

Używam tego podejścia w AngularJS, ponieważ automatycznie doda .ng-invalidklasy do <input>elementów formularza i do formularza, ale nie do <label>.

:beforei :aftersą stosowane w kontenerze, co oznacza, że ​​można go używać do elementów z tagiem końcowym.

Nie dotyczy elementów samozamykających.

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

Użyłem background-imagedo stworzenia czerwonej kropki dla wymaganych pól.

input[type="text"][required] {
  background-image: radial-gradient(red 15%, transparent 16%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}

Zobacz na Codepen

Nie możesz umieścić pseudo elementu w elemencie wejściowym, ale możesz umieścić element cienia, jak symbol zastępczy!

input[type="text"] {   
  &::-webkit-input-placeholder {
    &:before {
      // your code
    }
  }
}

Aby pracować w innych przeglądarkach, wykorzystania :-moz-placeholder, ::-moz-placeholdera :-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:

input[type="text"]::-webkit-input-placeholder:before { // your code }

Pseudoelementy, takie jak :after, :beforesą 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>

Działające rozwiązanie w czystym CSS:

Sztuką jest założenie, że za polem tekstowym jest element dom.

/*
 * The trick is here:
 * this selector says "take the first dom element after
 * the input text (+) and set its before content to the
 * value (:before).
 */
input#myTextField + *:before {
  content: "👍";
} 

<input id="myTextField" class="mystyle" type="text" value="someValue" />
<!--
  There's maybe something after a input-text
  Does'nt matter what it is (*), I use it.
  -->
<span></span>

(*) Ograniczone rozwiązanie:

• musisz mieć nadzieję, że istnieje następujący element dom,
• musisz mieć nadzieję, że żadne inne pole wejściowe nie podąży za twoim polem wejściowym.

Ale w większości przypadków znamy nasz kod, więc to rozwiązanie wydaje się wydajne i 100% CSS i 0% jQuery.

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ą :beforepseudo klasę z wybraną czcionką ikony.

<style type="text/css">

form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>

<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>

Największym nieporozumieniem jest znaczenie słów beforei after. Oni nie odnoszą się do samego elementu, lecz do zawartości w elemencie. Tak element:beforejest przed treścią i element:afterpo treści, ale oba nadal znajdują się w oryginalnym elemencie.

inputElement ma żadnej zawartości w widoku CSS, a więc nie ma :beforelub :afterzawartość 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.

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ż inputtak naprawdę nie jest już zamienionym elementem, podstawowa sytuacja się nie zmieniła: efekt :beforei :afterna 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.

Jak wyjaśnili inni, inputs są jakby pustymi elementami, więc większość przeglądarek nie pozwala na ich generowanie ::beforeani ::afterpseudoelementy.

Grupa robocza CSS rozważa jednak wyraźne zezwolenie, ::beforea ::afterjeśli tak, to na inputpewno appearance: none.

Od https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html ,

Zarówno Safari, jak i Chrome zezwalają na pseudoelementy w swoich formularzach. Inne przeglądarki nie. Zastanawialiśmy się nad usunięciem tego, ale licznik użycia rejestruje około 0,07% stron, które go wykorzystują, co stanowi 20-krotność naszego maksymalnego progu usuwania.

Właściwe określenie pseudoelementów na wejściach wymagałoby przynajmniej wewnętrznej struktury danych wejściowych, czego jeszcze nie zdołaliśmy (i nie jestem pewien, czy * możemy * zrobić). Ale Boris zasugerował, w jednym z wątków, pozwalając na pojawienie się: brak danych wejściowych - po prostu zamieniając je w elementy <div>, zamiast elementów w pewnym sensie zastąpionych.

spróbuj dalej:

label[for="userName"] {
  position: relative;
}

label[for="userName"]::after {
  content: '[after]';
  width: 22px;
  height: 22px;
  display: inline-block;
  position: absolute;
  right: -30px;
}

<label for="userName">
	Name: 
	<input type="text" name="userName" id="userName">
	</label>

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:

<div class="test">
    <input type="text"></input>
</div>

CSS:

input {
    margin: 3em;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    width:20%; 
}


.test {
    position: relative;
    background-color: #dedede;
    display: inline;
}

.test:before {
    content: '$';
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}

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"].

    <style>
    .happy:after { content:url(smiley.gif); }
    </style>

    <form>
    <!-- won't work -->
    <input class="happy" type="submit" value="Submit" />

    <!-- works -->
    <button class="happy">Submit</button>
    </form>

Podsumowanie

To nie działa z <input type="button"> , ale działa dobrze <input type="checkbox">.

Skrzypce : http://jsfiddle.net/gb2wY/50/

HTML :

<p class="submit">
    <input id="submit-button" type="submit" value="Post">
    <br><br>
    <input id="submit-cb" type="checkbox" checked>
</p>

CSS :

#submit-button::before,
#submit-cb::before {
    content: ' ';
    background: transparent;
    border: 3px solid crimson;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: -3px -3px;
}

:beforei :afterdział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ł.

Odkryłem, że możesz to zrobić w następujący sposób:

.submit .btn input
{
   padding:11px 28px 12px 14px;
   background:#004990;
   border:none;
    color:#fff;
}

 .submit .btn
 {
     border:none;
     color:#fff;
     font-family: 'Open Sans', sans-serif;
     font-size:1em;
     min-width:96px;
     display:inline-block;
     position:relative;
 }

.submit .btn:after
{
    content:">";
    width:6px;
    height:17px;
    position:absolute;
    right:36px;
    color:#fff;
    top:7px;
}

<div class="submit">
  <div class="btn">
     <input value="Send" type="submit" />
  </div>
</div>

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.

Mam inny pomysł, użyj tego zamiast:

<div>
<input type="text"></input>text can be entered here</div>