validacion - validar solo letras en html




¿Puedo usar un: antes o: después de un pseudo-elemento en un campo de entrada? (13)

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.


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


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


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.


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

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>

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 }

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

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

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>

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


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>


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


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


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




css-content