obligatorio - Use CSS para agregar automáticamente el asterisco ''campo requerido'' para formar entradas

asterisco campo obligatorio

Question

¿Cuál es una buena manera de superar el desafortunado hecho de que este código no funcionará como se desea?

<div class="required">
<label>Name:</label>
<input type="text">
</div>
<style>
.required input:after { content:"*"; }
</style>

En un mundo perfecto, todas las input requeridas obtendrían el pequeño asterisco que indica que el campo es obligatorio. Esta solución es imposible ya que el CSS se inserta después del contenido del elemento, no después del elemento en sí, pero algo así sería ideal. En un sitio con miles de campos obligatorios, puedo mover el asterisco delante de la entrada con un cambio a una línea ( :after a :before ) o puedo moverlo al final de la etiqueta ( .required label:after ) o delante de la etiqueta, o a una posición en la caja contenedora, etc.

Esto es importante no solo en caso de que cambie de opinión sobre dónde colocar el asterisco en todas partes, sino también en casos extraños en los que el diseño del formulario no permite el asterisco en la posición estándar. También funciona bien con la validación que verifica el formulario o resalta los controles incorrectamente completados.

Por último, no agrega marcado adicional.

¿Hay alguna buena solución que tenga todas o la mayoría de las ventajas del código imposible?

Answer 1

¿Eso es lo que tenías en mente?

http://jsfiddle.net/erqrN/1/

<div class="required">
<label>Name:</label>
<input type="text">
</div>
<style>
.required:after { content:" *"; }
</style>​

Answer 2

Creo que esta es la forma más eficiente de hacerlo, ¿por qué tanto dolor de cabeza?

 <div class="full-row">
<label for="email-id">Email Address<span style="color:red">*</span></label>
<input type="email" id="email-id" name="email-id" ng-model="user.email" >
</div>

Answer 3

Para aquellos que terminan aquí, pero tienen jQuery:

// javascript / jQuery
$("label.required").append(''<span class="red-star"> *</span>'')
// css
.red-star { color: red; }

Answer 4

Para ponerlo exactamente en la entrada INTO como se muestra en la siguiente imagen:

Encontré el siguiente enfoque:

.asterisk_input:after {
content:" *";
color: #e32;
position: absolute;
margin: 0px 0px 0px -20px;
font-size: xx-large;
padding: 0 5px 0 0; }
<form>
<div>
<input type="text" size="15" />
<span class="asterisk_input"> </span>
</div>
</form>

El sitio en el que trabajo está codificado con un diseño fijo, así que estaba bien para mí.

No estoy seguro de que sea bueno para el diseño líquido.

Answer 5

Puede lograr el resultado deseado al encapsular el código HTML en una etiqueta div que contiene la clase "requerida" seguida de la clase "grupo de formularios". * Sin embargo, esto solo funciona si tiene Bootstrap.

<div class="form-group required">
<div class="required">
<label>Name:</label>
<input type="text">
</div>
<div>

Answer 6

También puedes usar posicionamiento absoluto ...

http://jsfiddle.net/SpzTP/1/

.required {
display: inline-block;
position: relative;
}
.required label:after {
content:"*";
display: block;
position: absolute;
right: -.6em;
top: 0;
}

En el violín, incluyo una opción para colocar el ''*'' después de la entrada o después de la etiqueta.

Answer 7

Use jQuery y CSS

jQuery(document).ready(function() {
jQuery("[required]").after("<span class=''required''>*</span>");
});

.required {
position: absolute;
margin-left: -10px;
color: #FB0000;
font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="xxx" required>

Answer 8

escribir en CSS

.form-group.required .control-label:after {content:"*";color:red;}

y HTML

<div class="form-group required">
<label>Name:</label>
<input type="text">
</div>

Answer 9

Aunque esta es la respuesta aceptada, ignóreme y use la sintaxis :after sugiere a continuación. Mi solución no es accesible

Se podría lograr un resultado similar al utilizar una imagen de fondo de una imagen de un asterisco y establecer el fondo de la etiqueta / entrada / div externo y un relleno del tamaño de la imagen de asterisco. Algo como esto:

.required input {
padding-right: 25px;
background-image: url(...);
background-position: right top;
}

Esto colocará el asterisco DENTRO del cuadro de texto, pero poner el mismo en la entrada div.required lugar de .required input probablemente sea más de lo que está buscando, aunque sea un poco menos elegante.

Este método no requiere una entrada adicional.

Answer 10

hack rápido para aplicar a todas las etiquetas

function showRequiredAsterisk() {
$('':required'').each(
function(f){
var lbl = $(''label[for="''+this.id+''"]'').first();
if(lbl!=null){
if(!lbl.text().includes(''*'')){
lbl.html(lbl.html() + ''<span style="color:red"> * </span>'');
}
}
});
return false;
}
$(document).ready(function () {
showRequiredAsterisk();
});

Answer 11

.asterisc {
display: block;
color: red;
margin: -19px 185px;
}

<input style="width:200px">
<span class="asterisc">*</span>

Answer 12

.required label {
font-weight: bold;
}
.required label:after {
color: #e32;
content: '' *'';
display:inline;
}

Fiddle con su estructura exacta: http://jsfiddle.net/bQ859/

Answer 13

input[required], select[required] {
background-image: url(''/img/star.png'');
background-repeat: no-repeat;
background-position-x: right;
}

La imagen tiene un espacio de 20 píxeles a la derecha para no superponerse con la flecha desplegable de selección

Y se ve así:

Answer 14

input[required]{
background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
background-size: 1em 1em;
background-position: right top;
background-repeat: no-repeat;
}