¿Puedo usar un pseudo-elemento: before o: after en un campo de entrada?

Estoy tratando de usar el :afterpseudo-elemento CSS en un inputcampo, pero no funciona. Si lo uso con a span, funciona bien.

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

Esto funciona (pone el smiley después de "¡buu!" Y antes de "un poco más")

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

Esto no funciona: solo colorea algunos valores en rojo, pero no hay carita sonriente.

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

¿Qué estoy haciendo mal? ¿Debo usar otro pseudo-selector?

Nota: No puedo agregar un spanalrededor de mi input, porque está siendo generado por un control de terceros.

:aftery :beforeno son compatibles con Internet Explorer 7 y versiones anteriores, en ningún elemento.

Tampoco debe usarse en elementos reemplazados, como elementos de formulario (entradas) y elementos de imagen .

En otras palabras, es imposible con CSS puro.

Sin embargo, si usa jquery puede usar

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

Documentos de API en .after

Para agregar su contenido con javascript. Esto funcionará en todos los navegadores.

:beforey :afterrenderizar dentro de un contenedor

y <input> no puede contener otros elementos.

Los pseudoelementos solo se pueden definir (o mejor dicho, solo se admiten) en los elementos del contenedor. Porque la forma en que se representan está dentro del contenedor como un elemento hijo. inputno puede contener otros elementos, por lo tanto, no son compatibles. A, buttonpor otro lado, también es un elemento de formulario que los admite, porque es un contenedor de otros subelementos.

Si me preguntas, si un navegador hace mostrar estos dos pseudo-elementos en elementos no contenedores, que es un error y una conformidad no estándar. La especificación habla directamente sobre el contenido del elemento ...

Especificación W3C

Si leemos cuidadosamente la especificación, en realidad dice que se insertan dentro de un elemento contenedor:

Los autores especifican el estilo y la ubicación del contenido generado con los pseudoelementos: before y: after. Como indican sus nombres, los pseudoelementos: before y: after especifican la ubicación del contenido antes y después del contenido del árbol de documentos de un elemento. La propiedad 'contenido', junto con estos pseudo-elementos, especifica lo que se inserta.

¿Ver? El contenido del árbol de documentos de un elemento . Según tengo entendido, esto significa dentro de un contenedor.

Curiosamente, funciona con algunos tipos de entrada. Al menos en Chrome,

<input type="checkbox" />

funciona bien, igual que

<input type="radio" />

Es justo type=texty algunos otros que no funcionan.

Aquí hay otro enfoque (suponiendo que tenga control del HTML): agregue un vacío <span></span>justo después de la entrada y apunte eso en 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>

Estoy usando este enfoque en AngularJS porque agregará .ng-invalidclases automáticamente a los <input>elementos del formulario y al formulario, pero no al <label>.

:beforey :afterse aplican dentro de un contenedor, lo que significa que puede usarlo para elementos con una etiqueta final.

No aplica para elementos de cierre automático.

En una nota al margen, los elementos que se cierran automáticamente (como img / hr / input) también se conocen como 'Elementos reemplazados', ya que se reemplazan con su contenido respectivo. "Objetos externos" por la falta de un término mejor. Una mejor lectura aquí

Usé background-imagepara crear el punto rojo para los campos obligatorios.

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

¡No puede poner un pseudo elemento en un elemento de entrada, pero puede poner un elemento de sombra, como un marcador de posición!

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

Para hacer que funcione en otros navegadores, uso :-moz-placeholder, ::-moz-placeholdery :-ms-input-placeholder en diferentes selectores . No se pueden agrupar los selectores, porque si un navegador no reconoce el selector invalida toda la declaración.

ACTUALIZACIÓN : El código anterior funciona solo con preprocesador CSS (SASS, LESS ...), sin el uso de preprocesadores:

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

Los pseudo elementos como :after, :beforeson solo para elementos contenedores. Los elementos que comienzan y cierran en un solo lugar como <input/>, <img>etc., no son elementos contenedores y, por lo tanto, no se admiten pseudoelementos. Una vez que aplique un pseudo elemento al elemento contenedor como <div>y si inspecciona el código (vea la imagen), puede entender lo que quiero decir. En realidad, el pseudo elemento se crea dentro del elemento contenedor. Esto no es posible en caso de <input>o<img>

Una solución de trabajo en CSS puro:

El truco es suponer que hay un elemento dom después del 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>

(*) Solución limitada, sin embargo:

• tienes que esperar que haya un siguiente elemento dom,
• tiene que esperar que ningún otro campo de entrada siga a su campo de entrada.

Pero en la mayoría de los casos, conocemos nuestro código, por lo que esta solución parece eficiente y 100% CSS y 0% jQuery.

Encontré esta publicación porque tenía el mismo problema, esta fue la solución que funcionó para mí. A diferencia de reemplazar el valor de la entrada, simplemente elimínelo y coloque absolutamente un tramo detrás del mismo que sea del mismo tamaño, el tramo puede tener una :beforepseudo clase aplicada con la fuente de icono que elija.

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

El mayor malentendido aquí es el significado de las palabras beforey after. No se refieren al elemento en sí, sino al contenido del elemento. Entonces, element:beforeestá antes del contenido, y element:afterestá después del contenido, pero ambos todavía están dentro del elemento original.

El inputelemento no tiene contenido en la vista CSS y, por lo tanto, no tiene :beforeo tiene :afterpseudo contenido. Esto es cierto para muchos otros elementos vacíos o reemplazados.

No hay un pseudo elemento que se refiera al exterior del elemento.

En un universo diferente, estos pseudo elementos podrían haberse llamado de otra manera para aclarar esta distinción. Y alguien podría incluso haber propuesto un pseudo elemento que está realmente fuera del elemento. Hasta ahora, este no es el caso en este universo.

Según una nota en la especificación CSS 2.1, la especificación "no define completamente la interacción de: before y: after con elementos reemplazados (como IMG en HTML). Esto se definirá con más detalle en una especificación futura ". Aunque inputya no es realmente un elemento reemplazado, la situación básica no ha cambiado: el efecto de :beforey :aftersobre él no está especificado y generalmente no tiene ningún efecto.

La solución es encontrar un enfoque diferente para el problema que está tratando de abordar de esta manera. Poner contenido generado en un control de entrada de texto sería muy engañoso: para el usuario, parecería ser parte del valor inicial en el control, pero no se puede modificar, por lo que parecería ser algo forzado al comienzo del control, pero aún así no se enviaría como parte de los datos del formulario.

Como otros explicaron, los inputs son elementos vacíos reemplazados, por lo que la mayoría de los navegadores no le permitirán generar ::beforeni ::afterpseudoelementos en ellos.

Sin embargo, el Grupo de Trabajo CSS está considerando permitir explícitamente ::beforey ::afteren caso de que lo inputhaya hecho appearance: none.

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

Safari y Chrome permiten seudoelementos en sus entradas de formulario. Otros navegadores no lo hacen. Buscamos eliminar esto, pero el contador de uso está grabando ~ .07% de las páginas que lo usan, que es 20 veces nuestro umbral máximo de eliminación.

En realidad, la especificación de pseudoelementos en las entradas requeriría especificar la estructura interna de las entradas al menos un poco, lo que aún no hemos logrado hacer (y no estoy seguro de que * podamos * hacer). Pero Boris sugirió, en uno de los subprocesos de errores, permitirlo en apariencia: ninguna entrada, básicamente solo convertirlos en <div> s, en lugar de elementos "reemplazados".

prueba a continuación:

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>

Debe tener algún tipo de envoltorio alrededor de la entrada para usar un pseudo-elemento anterior o posterior. Aquí hay un violín que tiene un antes en el contenedor contenedor de una entrada y luego coloca el antes dentro de la entrada, o al menos así lo parece. Obviamente, este es un trabajo alternativo pero efectivo en caso de apuro y se presta para ser receptivo. Puedes hacer esto fácilmente después si necesitas poner algún otro contenido.

Violín de trabajo

Signo de dólar dentro de una entrada como un pseudo-elemento: http://jsfiddle.net/kapunahele/ose4r8uj/1/

El HTML:

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

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

Si está tratando de diseñar un elemento de entrada con: before y: after, es probable que esté tratando de imitar los efectos de otros span, div o incluso elementos en su pila CSS.

Como señala la respuesta de Robert Koritnik,: before y: after solo pueden aplicarse a elementos de contenedor y los elementos de entrada no son contenedores.

SIN EMBARGO, HTML 5 introdujo el elemento de botón que es un contenedor y se comporta como un elemento de entrada [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>

Resumen

No funciona con <input type="button">, pero funciona bien con <input type="checkbox">.

Violín : 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;
}

:beforey :aftersolo funciona para nodos que pueden tener nodos secundarios ya que insertan un nuevo nodo como el primer o el último nodo.

Descubrí que puedes hacerlo así:

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

Debe tener un padre div que tome el relleno y el: después. El primer padre debe ser relativo y el segundo div debe ser absoluto para que pueda establecer la posición del after.

Tengo otra idea, use esto en su lugar:

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