Si marca el formulario en este enlace, verá que los campos obligatorios tienen un class="required" en el CSS y un * en el marcado.¿Puede CSS agregar texto automáticamente?
¿Puede el * que muestra en el marcado añadirse en su totalidad con CSS para divs que tienen esta clase?
Usted puede utilizar la clase after seudo:
.required:after { content: "*"; }
o, porque usted pidió explícitamente un div con la clase:
div.required:after { content: "*"; }
deben trabajar (para IE sólo a partir de IE8)
Puede aplicar cualquier estilo a esto, por supuesto. Incluso puede hacer cosas como esta:
div.required:after:hover { /* Hello, I'm a geek. */ }
Esto también se puede lograr con JavaScript. jQuery:
$(".required").append("*");
Máquina O de una * forma * seria ... –
span:after { content:"*"; }
Demostración:http://jsfiddle.net/W3gHU/
Usted puede utilizar el elemento seudo :after o before css para esto, más información, también ABT Qué navegadores apoyarlo here.
Prueba esta página:
<html>
<style>
.required:after {
color: red;
content: "*"
}
</style>
<body>
<div class="required">Name</div> <input type="text">
<div class="required">Email</div> <input type="text">
</body>
</html>
: después de que se entiende por probablemente todo a excepción de IE (esperemos que IE9 tendrá soporte)
actualización teniendo en cuenta la Observación de Šime Vidas: era solo un ejemplo de uso. Por supuesto que traería más sentido si lo hacemos de esta manera:
.required:before {
color: red;
content: "*"
}
....
<div>Name <input type="text" class="required"> </div>
entonces incluso podemos añadir la validación Javascript discreta para ese campo (por lo que de esta manera trae buenas ventajas). El problema es que esta página refactorizada se mostrará como solo queremos en Opera (la revisé en todas las versiones anteriores de los navegadores, excepto Firefox 4, pero no estoy seguro de que FF cambie la forma en que toman ese estilo en cuenta).)
: después y: antes no funcionan para elementos de entrada e img; there is discusión relacionada de por qué. $ (". required"). before ("*") de jQuery, sin embargo, funcionará en todas partes, pero eso es más acerca de JavaScript y CSS (y fue mencionado anteriormente por otras personas).
Tendría más sentido si pusiera los elementos de ENTRADA dentro de los DIV. –
@ Šime gracias por su entrada – Maxym
Puede agregar una imagen de una estrella a través de CSS. Esto debería funcionar en todos los navegadores.
.required
{
background-image:url(/path/to/your/images/dir/required-field.png);
background-position:top right;
background-repeat:no-repeat;
padding-right:10px;
}
Se ha eliminado la etiqueta 'php'. No PHP aquí ... – polarblau