¿Detectar si una entrada tiene texto usando CSS, en una página que estoy visitando y que no controlo?
¿Hay alguna manera de detectar si una entrada tiene texto o no a través de CSS? Intenté usar la :emptypseudoclase y probé usar [value=""], ninguna de las cuales funcionó. Parece que no puedo encontrar una solución única para esto.
Me imagino que esto debe ser posible, considerando que tenemos pseudoclases para :checkedy :indeterminate, las cuales son algo similar.
Tenga en cuenta: estoy haciendo esto para un estilo "Elegante" , que no puede utilizar JavaScript.
También tenga en cuenta que Stylish se utiliza, del lado del cliente, en páginas que el usuario no controla.
Si su elemento tiene un atributo de marcador de posición, puede usar la :placeholder-shownpseudoclase.
El atributo de marcador de posición es obligatorio y no puede estar en blanco, pero puedes usar un solo espacio.
input:not(:placeholder-shown) {
border-color: green;
}
input:placeholder-shown {
border-color: red;
}<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />La :placeholder-shownpropiedad es compatible con el 97% de los navegadores y, en general, es segura de usar. Con los prefijos correctos, puede funcionar incluso en IE10.
Es posible, con las advertencias habituales de CSS y si el código HTML se puede modificar. Si agrega el requiredatributo al elemento, entonces el elemento coincidirá con :invalido :validsegún si el valor del control está vacío o no. Si el elemento no tiene ningún valueatributo (o lo tiene value=""), el valor del control está inicialmente vacío y deja de estar vacío cuando se ingresa cualquier carácter (incluso un espacio).
Ejemplo:
<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>
Los pseudoclasificados :validy :invalidse definen en documentos CSS de nivel de borrador de trabajo únicamente, pero el soporte está bastante extendido en los navegadores, excepto que en IE, vino con IE 10.
Si desea que "vacío" incluya valores que constan únicamente de espacios, puede agregar el atributo pattern=.*\S.*.
(Actualmente) no existe un selector de CSS para detectar directamente si un control de entrada tiene un valor no vacío, por lo que debemos hacerlo indirectamente, como se describió anteriormente.
Generalmente, los selectores de CSS se refieren al marcado o, en algunos casos, a las propiedades de los elementos configuradas con secuencias de comandos (JavaScript del lado del cliente), en lugar de acciones del usuario. Por ejemplo, :emptycoincide con elementos con contenido vacío en el marcado; todos inputlos elementos están inevitablemente vacíos en este sentido. El selector [value=""]prueba si el elemento tiene el valueatributo en el marcado y tiene la cadena vacía como valor. Y :checkedy :indeterminateson cosas similares. No se ven afectados por la entrada real del usuario.
