Pregunta ¿Puedo usar un: antes o después del pseudo-elemento en un campo de entrada?


Estoy tratando de usar el :after Pseudo-elemento CSS en un input campo, pero no funciona. Si lo uso con un span, funciona bien

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

Esto funciona (pone el emoticono 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 emoticones.

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

¿Qué estoy haciendo mal? ¿Debería usar otro pseudo-selector?

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


541
2018-04-06 19:28


origen


Respuestas:


:after y :before no son compatibles con Internet Explorer 7 y versiones anteriores, en ningún elemento.

Tampoco está destinado a ser utilizado en elementos reemplazados tales como elementos de forma (entradas) y elementos de imagen.

En otras palabras, es imposible con CSS puro

Sin embargo, si se usa jquery puedes usar

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

Docs de API en .after

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


222
2018-04-07 10:01



:before y :after renderizar dentro de un contenedor

y <input> no puede contener otros elementos.


Los pseudo-elementos solo se pueden definir (o mejor dicho solo son compatibles) en elementos de contenedor. Porque la forma en que se rinden es dentro el contenedor en sí mismo como un elemento secundario. input no puede contener otros elementos, por lo tanto, no son compatibles. UN button por otro lado, también es un elemento de formulario que los admite, porque es un contenedor de otros subelementos.

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

Especificación W3C

Si leemos con cuidado la especificación en realidad dice que están insertados dentro un elemento que contiene:

Los autores especifican el estilo y la ubicación del contenido generado con los pseudo-elementos: before y: after. Como indican sus nombres, los pseudo-elementos: 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 qué se inserta.

¿Ver? el árbol de documentos de un elemento contenido


1108
2018-01-11 17:18



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

<input type="checkbox" />

funciona bien, lo mismo que

<input type="radio" />

Es solo type=text y algunos otros que no funcionan.


55
2017-12-24 09:56



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

Estoy usando este enfoque en AngularJS porque agregará .ng-invalid clases de forma automática a <input> elementos de la forma, y ​​a la forma, pero no a la <label>.


31
2017-07-13 20:25



:before y :after se aplican dentro de un contenedor, lo que significa que puede usarlo para elementos con una etiqueta de cierre.

No se aplica a elementos de cierre automático.

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


28
2018-01-13 12:25



Usé el background-image para 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


23
2018-06-17 11:40



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

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

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

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

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

21
2017-11-13 21:10