html - que - nuevos selectores css

Generación de contenido CSS antes o después de los elementos de ''entrada''

Question

Esta pregunta ya tiene una respuesta aquí:

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

En Firefox 3 y Google Chrome 8.0, el siguiente funciona como se espera:

<style type="text/css">
span:before { content: ''span: ''; }
</style>
<span>Test</span> <!-- produces: "span: Test" -->

Pero no ocurre cuando el elemento es <input> :

<style type="text/css">
input:before { content: ''input: ''; }
</style>
<input type="text"></input> <!-- produces only the textbox; the generated content
is nowhere to be seen in both FF3 and Chrome 8 -->

¿Por qué no está funcionando como esperaba?

Answer 1

Algo como esto funciona:

<style>
input + label:after {
content: ''click my input'';
color: blue;
}
input:focus + label:after {
content: ''not valid yet'';
color: blue;
}
input:valid + label:after {
content: ''looks good'';
color: red;
}
</style>
<input id="input" type="number" required />
<label for="input"></label>

A continuación, agregue algunos flotadores o posicionamiento para pedir cosas. Aquí hay un JSBin:

http://jsbin.com/roxem/2/edit

Answer 2

Con :before y :after especificar qué contenido debe insertarse antes (o después) del contenido dentro de ese elemento. input elementos de input no tienen contenido

Por ejemplo, si escribe <input type="text">Test</input> (que es incorrecto) el navegador corregirá esto y colocará el texto después del elemento de entrada.

Lo único que podría hacer es ajustar cada elemento de entrada en un tramo o div y aplicar el CSS en estos.

Vea los ejemplos en la specification :

Por ejemplo, el siguiente fragmento de documento y hoja de estilo:

<h2> Header </h2> h2 { display: run-in; }
<p> Text </p> p:before { display: block; content: ''Some''; }

... se renderizaría exactamente de la misma manera que el siguiente fragmento de documento y hoja de estilo:

<h2> Header </h2> h2 { display: run-in; }
<p><span>Some</span> Text </p> span { display: block }

Esta es la misma razón por la que no funciona para <br> , <img> , etc. ( <textarea> parece ser especial).

Answer 3

Esto no se debe a que las etiquetas de input no tienen ningún contenido per se, sino que su contenido está fuera del alcance de CSS .

input elementos de input son un tipo especial llamado replaced elements , estos no son compatibles con :pseudo selectores como :before y :after .

En CSS, un elemento reemplazado es un elemento cuya representación está fuera del alcance de CSS . Estos son tipos de objetos externos cuya representación es independiente del CSS. Los elementos reemplazados típicos son <img> , <object> , <video> o elementos de formulario como <textarea> y <input> . Algunos elementos, como <audio> o <canvas> son elementos reemplazados solo en casos específicos. Los objetos insertados con las propiedades de contenido CSS son elementos reemplazados anónimos.

Tenga en cuenta que esto incluso se menciona en la especificación :

Esta especificación no define completamente la interacción de :before y :after con los elementos reemplazados (como IMG en HTML).

Y más explícitamente :

Los elementos reemplazados no tienen ::before y ::after pseudo-elements

Answer 4

Use etiquetas etiqueta y nuestro método para = , está obligado a la entrada . Si sigue las reglas del formulario y evita la confusión con las etiquetas, use lo siguiente:

<style type="text/css">
label.lab:before { content: ''input: ''; }
</style>

o compare (código corto):

<style type="text/css">
div label { content: ''input: ''; color: red; }
</style>

formar....

<label class="lab" for="single"></label><input name="n" id="single" ...><label for="single"> - simle</label>

o compare (código corto):

<div><label></label><input name="n" ...></div>

Answer 5

fyi <form> admite :before / :after también, podría ser de ayuda si envuelve su elemento <input> con él ... (también tuve un problema de diseño con eso)