Posso usar um pseudoelemento a: before ou: after em um campo de entrada?

Estou tentando usar o :afterpseudoelemento CSS em um inputcampo, mas ele não funciona. Se eu usá-lo com um span, ele funciona bem.

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

Isso funciona (coloca o smiley depois de "buu!" E antes de "um pouco mais")

<span class="mystyle">buuu!</span>a some more

Isso não funciona - apenas cores algum valor em vermelho, mas não há smiley.

<input class="mystyle" type="text" value="someValue">

O que estou fazendo errado? devo usar outro pseudo-seletor?

Nota: Não consigo adicionar um spanao redor do meu input, porque ele está sendo gerado por um controle de terceiros.

:aftere :beforenão são suportados no Internet Explorer 7 e inferior, em nenhum elemento.

Também não deve ser usado em elementos substituídos, como elementos de formulário (entradas) e elementos de imagem .

Em outras palavras, é impossível com CSS puro.

No entanto, se você estiver usando jquery, poderá usar

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

Documentos da API em .after

Para anexar seu conteúdo com javascript. Isso funcionará em todos os navegadores.

:beforee :afterrenderizar dentro de um contêiner

e <input> não pode conter outros elementos.

Os pseudoelementos só podem ser definidos (ou melhor, apenas são suportados) nos elementos do contêiner. Porque a maneira como eles são renderizados está dentro do próprio contêiner como um elemento filho. inputnão pode conter outros elementos, portanto, eles não são suportados. Por buttonoutro lado, também é um elemento de formulário que os suporta, porque é um contêiner de outros subelementos.

Se você me perguntar, se algum navegador faz exibir esses dois pseudo-elementos em elementos não-contêiner, que é um bug e uma conformidade não-padrão. A especificação fala diretamente sobre o conteúdo do elemento ...

Especificação W3C

Se lermos com atenção a especificação , na verdade, ela será inserida em um elemento que contém:

Os autores especificam o estilo e a localização do conteúdo gerado com os pseudoelementos: before e: after. Como seus nomes indicam, os pseudoelementos: before e: after especificam o local do conteúdo antes e depois do conteúdo da árvore de documentos de um elemento. A propriedade 'content', em conjunto com esses pseudoelementos, especifica o que é inserido.

Vejo? o conteúdo da árvore de documentos de um elemento . Pelo que entendi, isso significa dentro de um contêiner.

Estranhamente, ele funciona com alguns tipos de entrada. Pelo menos no Chrome,

<input type="checkbox" />

funciona bem, igual a

<input type="radio" />

É apenas type=texte alguns outros que não funcionam.

Aqui está outra abordagem (supondo que você tenha controle do HTML): adicione um vazio <span></span>logo após a entrada e direcione-o para CSS usandoinput.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>

Estou usando essa abordagem no AngularJS porque ele adicionará .ng-invalidclasses automaticamente para <input>formar elementos e para o formulário, mas não para o <label>.

:beforee :aftersão aplicados dentro de um contêiner, o que significa que você pode usá-lo para elementos com uma tag final.

Não se aplica a elementos de fechamento automático.

Em uma nota lateral, os elementos que se fecham automaticamente (como img / hr / input) também são conhecidos como 'Elementos Substituídos', pois são substituídos pelo respectivo conteúdo. "Objetos externos" pela falta de um termo melhor. Uma leitura melhor aqui

Usei o background-imagepara criar o ponto vermelho para os campos obrigatórios.

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

Ver no Codepen

Você não pode colocar um pseudo-elemento em um elemento de entrada, mas pode colocar no elemento de sombra, como um espaço reservado!

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

Para fazê-lo funcionar em outros navegadores, utilização :-moz-placeholder, ::-moz-placeholdere :-ms-input-placeholder em diferentes seletores . Não é possível agrupar os seletores, porque se um navegador não reconhecer, o seletor invalidará toda a instrução.

UPDATE : O código acima funciona apenas com o pré-processador CSS (SASS, LESS ...), sem o uso de pré-processadores:

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

Pseudo-elementos como :after, :beforesão apenas para elementos de contêiner. Elementos iniciando e fechando em um único local como <input/>, <img>etc , não são elementos de contêiner e, portanto, pseudo-elementos não são suportados. Depois de aplicar um pseudo elemento ao elemento container, <div>e se você inspecionar o código (veja a imagem), poderá entender o que quero dizer. Na verdade, o pseudo elemento é criado dentro do elemento container. Isso não é possível no caso de <input>ou<img>

Uma solução funcional em CSS puro:

O truque é supor que exista um elemento dom após o campo de texto.

/*
 * 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>

(*) Solução limitada, no entanto:

• você tem que esperar que haja um elemento dom a seguir,
• você precisa esperar que nenhum outro campo de entrada siga seu campo de entrada.

Mas, na maioria dos casos, conhecemos o nosso código, portanto essa solução parece eficiente e 100% CSS e 0% jQuery.

Encontrei este post porque estava tendo o mesmo problema, esta foi a solução que funcionou para mim. Em vez de substituir o valor da entrada, basta removê-lo e posicionar absolutamente uma extensão atrás dela que é do mesmo tamanho, a extensão pode ter uma :beforepseudo classe aplicada a ela com a fonte do ícone de sua escolha.

<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>

O maior mal-entendido aqui é o significado das palavras beforee after. Eles não se referem ao próprio elemento, mas ao conteúdo do elemento. O mesmo element:beforeacontece antes do conteúdo eelement:after depois do conteúdo, mas ambos ainda estão dentro do elemento original.

O inputelemento não possui conteúdo na visualização CSS e, portanto, não possui :beforeou:after pseudo conteúdo. Isso vale para muitos outros elementos nulos ou substituídos.

Não há pseudo-elemento referente a fora do elemento.

Em um universo diferente, esses pseudo-elementos poderiam ter sido chamados de outra coisa para tornar essa distinção mais clara. E alguém pode até ter proposto um pseudo-elemento que está genuinamente fora do elemento. Até agora, este não é o caso neste universo.

De acordo com uma nota na especificação do CSS 2.1, a especificação “não define completamente a interação de: before e: after com elementos substituídos (como IMG em HTML). Isso será definido em mais detalhes em uma especificação futura. ” Embora inputnão seja mais um elemento substituído, a situação básica não mudou: o efeito de :beforee :aftersobre ele não é especificado e geralmente não tem efeito.

A solução é encontrar uma abordagem diferente para o problema que você está tentando resolver dessa maneira. Colocar o conteúdo gerado em um controle de entrada de texto seria muito enganador: para o usuário, isso pareceria fazer parte do valor inicial no controle, mas não poderá ser modificado - portanto, pareceria algo forçado no início do controle, mas ainda assim não seria enviado como parte dos dados do formulário.

Como outros explicaram, inputs são elementos vazios substituídos, portanto a maioria dos navegadores não permite gerar ::beforenem ::afterpseudo-elementos neles.

No entanto, o Grupo de Trabalho CSS está considerando permitir explicitamente ::beforee ::afterno caso de inputter appearance: none.

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

O Safari e o Chrome permitem pseudoelementos em suas entradas de formulário. Outros navegadores não. Procuramos remover isso, mas o contador de uso está gravando ~ 0,07% das páginas que o utilizam, o que é 20x o nosso limite máximo de remoção.

Na verdade, especificar pseudoelementos nas entradas exigiria especificar a estrutura interna das entradas pelo menos um pouco, o que ainda não conseguimos fazer (e não tenho certeza de que podemos fazer). Mas Boris sugeriu, em um dos tópicos, permitir que apareça: nenhuma entrada - basicamente apenas transformá-las em <div> s, em vez de elementos "meio que substituídos".

tente a seguir:

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>

Você precisa ter algum tipo de wrapper ao redor da entrada para usar um pseudoelemento antes ou depois. Aqui está um violino que tem um antes na div wrapper de uma entrada e, em seguida, coloca o antes dentro da entrada - ou pelo menos parece. Obviamente, isso é uma solução alternativa, mas eficaz em um beliscão e se presta a responder. Você pode facilmente fazer isso depois, se precisar colocar algum outro conteúdo.

Violino de trabalho

Cifrão dentro de uma entrada como um pseudo-elemento: http://jsfiddle.net/kapunahele/ose4r8uj/1/

O HTML:

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

O 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;
}

Se você estiver tentando estilizar um elemento de entrada com: before e: after, é provável que você esteja tentando imitar os efeitos de outro span, div ou mesmo de um elemento em sua pilha CSS.

Como aponta a resposta de Robert Koritnik,: antes e: depois só podem ser aplicados a elementos de contêiner e os elementos de entrada não são contêineres.

NO ENTANTO, o HTML 5 introduziu o elemento button , que é um contêiner e se comporta como um elemento input [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>

Sumário

Não funciona <input type="button">, mas funciona bem <input type="checkbox">.

Violino : 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;
}

:beforee :afterfunciona apenas para nós que podem ter nós filhos, pois inserem um novo nó como o primeiro ou o último nó.

Descobri que você pode fazer assim:

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

Você precisa ter um pai div que aceite o preenchimento e o: depois. O primeiro pai precisa ser relativo e o segundo div deve ser absoluto para que você possa definir a posição do depois.

Eu tenho outra idéia, use isso:

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