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

validar formulario javascript onclick

Question

Estoy tratando de usar el :after pseudo-elemento CSS en un campo de input , 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 "algo más")

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

Esto no funciona, solo colorea algo de Valor en rojo, pero no hay una sonrisa.

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

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

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

Answer 1

:before y :after render dentro de un contenedor

y <input> no puede contener otros elementos.

Los pseudo-elementos solo se pueden definir (o mejor dicho, solo se admiten) en los elementos contenedores. Porque la forma en que se representan se encuentra dentro del propio contenedor como elemento secundario. input no puede contener otros elementos, por lo tanto, no son compatibles. Por otro lado, un button que también es un elemento de formulario los admite, porque es un contenedor de otros subelementos.

Si me preguntas, si algún navegador muestra estos dos pseudo-elementos en elementos no contenedores, es un error y una conformidad no estándar. La especificación habla directamente del 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: antes y: después de los pseudo-elementos. Como lo indican sus nombres, el: antes y: después de los pseudo-elementos 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 . Como lo entiendo esto significa dentro de un contenedor.

Answer 2

Como explicaron otros, las input s son elementos vacíos algo reemplazados, por lo que la mayoría de los navegadores no le permitirán generar ::before ni ::after pseudo-elementos en ellos.

Sin embargo, el Grupo de Trabajo CSS está considerando permitir explícitamente ::before y ::after en caso de que la input tenga appearance: none .

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

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

En realidad, la especificación de pseudo-elementos en las entradas requeriría especificar la estructura interna de las entradas al menos en cierta medida, lo que aún no hemos logrado (y no estoy seguro de que * podamos * hacerlo). Pero Boris sugirió, en uno de los subprocesos, permitir que apareciera: ninguna entrada, básicamente, simplemente convirtiéndolos en <div> s, en lugar de elementos "sustituidos un poco".

Answer 3

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

<input type="checkbox" />

funciona bien, igual que

<input type="radio" />

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

Answer 4

De acuerdo con una note en la especificación CSS 2.1, la especificación “no define completamente la interacción de: antes y: después con elementos reemplazados (como IMG en HTML). Esto se definirá con más detalle en una especificación futura ”. Aunque la input ya no es un elemento reemplazado, la situación básica no ha cambiado: el efecto de :before y :after sobre él no se especifica y generalmente no tiene efecto.

La solución es encontrar un enfoque diferente para el problema que está tratando de resolver de esta manera. Poner el 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 puede modificarse, por lo que parece ser algo forzado al comienzo del control, pero aún no se presentaría como parte de los datos del formulario.

Answer 5

Debe tener algún tipo de envoltorio alrededor de la entrada para utilizar un pseudo-elemento antes o después. Aquí hay un violín que tiene un antes en el div envoltorio de una entrada y luego coloca el antes dentro de la entrada, o al menos parece que sí. Obviamente, se trata de una solución alternativa pero efectiva en caso de apuro y se presta para ser receptivo. Puede hacer esto fácilmente después si necesita poner algún otro contenido.

Violín de trabajo

Signo de dólar dentro de una entrada como 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;
}

Answer 6

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>

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

Answer 7

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 intervalo detrás del mismo tamaño, el intervalo puede tener una :before pseudo 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>

Answer 8

No puede poner un pseudo elemento en un elemento de entrada, pero puede poner en el elemento de sombra, ¡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 un navegador no reconoce, el selector invalida toda la declaración.

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

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

Answer 9

Pseudo elementos como :after :before son solo para elementos contenedor. Los elementos que se inician y cierran en un solo lugar como <input/> , <img> etc. no son elementos de contenedor y, por lo tanto, no se admiten los pseudo elementos. Una vez que aplique un pseudo elemento a un 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>

Answer 10

Puedes usar el elemento posterior o anterior en tu bloque principal con jQuery. Me gusta esto:

$(yourInput).parent().addClass("error-form-field");

Answer 11

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

Como señala la respuesta de Robert Koritnik,: antes y: después solo se puede aplicar 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>

Answer 12

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, aunque:

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

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

Answer 13

Usé la background-image para crear el punto rojo para los campos requeridos.

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

Answer 14

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

Answer 15

Aquí hay otro enfoque (asumiendo que usted tiene el control del HTML): agregue un <span></span> vacío justo después de la entrada, e input.mystyle + span:after 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á clases .ng-invalid automáticamente a <input> elementos del formulario, y al formulario, pero no a la <label> .

Answer 16

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

Tampoco está diseñado para ser usado 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 API en .after

Para añadir su contenido con javascript. Esto funcionará en todos los navegadores.

Answer 17

:before y :after solo funciona para los nodos que pueden tener nodos secundarios, ya que insertan un nuevo nodo como el primer o el último nodo.

Answer 18

:before y :after se 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 lateral, 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 here

Answer 19

Resumen

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

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