¿Cómo aplico un estilo a un cuadro de entrada vacío? Si el usuario escribe algo en el campo de entrada, el estilo ya no debería aplicarse. ¿Es esto posible en CSS? Intenté esto:Coincidencia de un cuadro de entrada vacío usando CSS
input[value=""]
No hay selector en CSS que hace esto. Los selectores de atributos coinciden con los valores de los atributos, no con los valores calculados.
Debería tener JavaScript.
input[value=""] no funcionará con
<input type="text" />
pero trabajado para mí en cromo con
<input type="text" value="" />
Pero el estilo no va a cambiar tan pronto como alguien va a empezar a escribir. Entonces deberías usar js para eso.
No es confiable ya que el atributo de valor no se cambia en DOM después de una edición de campo. Sin embargo, buen truco si no te importa esto, y funciona en las últimas versiones de Safari, Chrome, FF e IE ... – Dunc
Para que coincida con el anterior, puedes usar 'input [value =" "], input: not ([ valor]) '. – Schism
Si sólo el campo es required que podría ir con input:valid
#foo-thing:valid + .msg { visibility: visible!important; } <input type="text" id="foo-thing" required="required">
<span class="msg" style="visibility: hidden;">Yay not empty</span>Ver live on jsFiddle
o impidan el uso de #foo-thing:invalid (crédito a @SamGoody)
$('input#edit-keys-1').blur(function(){
tmpval = $(this).val();
if(tmpval == '') {
$(this).addClass('empty');
$(this).removeClass('not-empty');
} else {
$(this).addClass('not-empty');
$(this).removeClass('empty');
}
});
en jQuery. Agregué una clase y diseñé con css.
.empty { background:none; }
estoy preguntado por las respuestas que tenemos atributo claro para conseguir cajas vacías de entrada, echar un vistazo a este código
/*empty input*/
input:empty{
border-color: red;
}
/*input with value*/
input:not(:empty){
border-color: black;
}
ACTUALIZACIÓN
input, select, textarea {
border-color: @green;
&:empty {
border-color: @red;
}
}
Más sobre para tener una excelente apariencia en la validación
input, select, textarea {
&[aria-invalid="true"] {
border-color: amber !important;
}
&[aria-invalid="false"], &.valid {
border-color: green !important;
}
}
': empty' solo se aplica a los elementos que no tienen hijos. Las entradas no pueden tener nodos secundarios para que su entrada siempre tenga un borde rojo. También vea [este comentario] (http://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css#comment23212939_3617050) – Zhegan
@Zhegan compruebe mi respuesta actualizada, –
@NasserHadjloo ha probado esto ? Cambiar el 'valor' no cambia la cantidad de nodos secundarios. – jcuenod
La actualización del valor de un campo no actualiza su atributo de valor en el DOM, por eso su selector siempre está haciendo coincidir un campo, incluso cuando no está realmente vacío.
usar en su lugar la invalid pseudo-class para conseguir lo que quiere, de este modo:
input:required {
border: 1px solid green;
}
input:required:invalid {
border: 1px solid red;
}<input required type="text" value="">
<input required type="text" value="Value">Si el apoyo navegadores antiguos no es necesario, se puede utilizar una combinación de required, valid y invalid .
Lo bueno de usar esto es que los pseudo-elementos valid y invalid funcionan bien con los atributos de tipo de los campos de entrada.Por ejemplo:
input:invalid, textarea:invalid {
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
input:valid, textarea:valid {
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}<input type="email" name="email" placeholder="[email protected]" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>Como referencia, jsFiddle aquí: http://jsfiddle.net/0sf6m46j/
En los navegadores modernos se puede utilizar para apuntar :placeholder-shown la entrada de vacío (que no debe confundirse con ::placeholder).
input:placeholder-shown {
border: 1px solid red; /* Red border only if the input is empty */
}
Más información y navegador de apoyo: https://css-tricks.com/almanac/selectors/p/placeholder-shown/
No funciona en IE (hasta 11) pero una buena respuesta no obstante – Amanpreet
¡Eso es genial! Muy útil :) – unbreak
¿Esto funcionará incluso si no hay un conjunto de marcadores de posición? – TricksfortheWeb
Esto funcionó para mí:
html: - añadir atributo requerido para el elemento de entrada
<input class="my-input-element" type="text" placeholder="" required />
css: - Uso: inválido selector
input.my-input-element:invalid {
}
Notas: No se necesita valor
Esta pregunta podría haber sido preguntado hace algún tiempo, pero tan reciente aterricé sobre este tema en busca de validación del lado del cliente, y como el :placeholder-shownsupport está mejorando, pensé que el siguiente podría ayudar a los demás.
Utilizando Berend idea de utilizar esta pseudoclase de CSS4, pude crear una validación de formulario que solo se activa después de que el usuario termine de completarla.
Aquí es ADEMO y explicación sobre CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ
Para cualquiera encontrando esta respuesta después: Quentin es correcta con respecto a los valores calculados, sin embargo no es el: selector de vacío que podría ser utilizado aquí y tiene un apoyo razonable (todos los navegadores excepto IE8 y anteriores según: http://www.w3schools.com/cssref/sel_empty.asp – Cohen
': empty' selector solo funciona en elementos vacíos, lo que significa solo en elementos que tienen etiquetas de apertura y cierre que están vacías en el medio, y elementos de etiqueta única que consideran siempre vacío, [ejemplo] (http://jsfiddle.net/SE7Bq/), por lo que no se puede usar en elementos de entrada excepto 'textarea' – am05mhz
No es cierto. Consulte la respuesta de lukmo a continuación. Combinación del atributo requerido y el: válido o: los pseudo selectores no válidos logran esto. – voidstate