css - obligatorios - asterisco rojo bootstrap
¿Agregar asterisco a los campos obligatorios en el programa de arranque 3? (5)
Mi HTML tiene una clase llamada required que se asigna a los campos obligatorios. Aquí está el html:
<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
<input type=''hidden'' name=''csrfmiddlewaretoken'' value=''brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt'' />
<div class="form-group required">
<label class="col-md-2 control-label">Username</label>
<div class="col-md-4">
<input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
</div>
</div>
<div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label"> </label><div class="col-md-4"><div class="checkbox"><label><input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service</label></div></div></div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-star"></span> Sign Me Up!
</button>
</div>
</div>
</form>
Agregué lo siguiente a mi CSS;
.form-group .required .control-label:after {
content:"*";color:red;
}
Todavía eso no da un * rojo alrededor de los campos requeridos. ¿que me estoy perdiendo aqui? ¿No hay una manera directa en bootstrap 3 de introducir * a los campos requeridos?
EDITAR: El * en términos y condiciones no aparece inmediatamente en la casilla de verificación.¿Cómo arreglar esto?
Este CSS funcionó para mí:
.form-group.required.control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -10px;
}
y este HTML:
<div class="form-group required control-label">
<label for="emailField">Email</label>
<input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
</div>
Las otras dos respuestas son correctas. Cuando incluye espacios en sus selectores de CSS, se dirige a los elementos secundarios de modo que:
.form-group .required {
styles
}
Se dirige a un elemento con la clase de "requerido" que está dentro de un elemento con la clase de "form-group".
Sin el espacio, se dirige a un elemento que tiene ambas clases. ''required'' y ''form-group''
Suponiendo que esto es lo que parece el HTML
<div class="form-group required">
<label class="col-md-2 control-label">E-mail</label>
<div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
</div>
Para mostrar un asterisco a la derecha de la etiqueta:
.form-group.required .control-label:after {
color: #d00;
content: "*";
position: absolute;
margin-left: 8px;
top:7px;
}
O a la izquierda de la etiqueta:
.form-group.required .control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -15px;
}
Para hacer un buen asterisco rojo grande, puede agregar estas líneas:
font-family: ''Glyphicons Halflings'';
font-weight: normal;
font-size: 14px;
O si está utilizando Font Awesome, agregue estas líneas (y cambie la línea de contenido):
font-family: ''FontAwesome'';
font-weight: normal;
font-size: 14px;
content: "/f069";
Utilice .form-group.required sin el espacio.
.form-group.required .control-label:after {
content:"*";
color:red;
}
Editar:
Para la casilla de verificación, puede usar la pseudoclase: not (). Usted agrega el * requerido después de cada etiqueta a menos que sea una casilla de verificación
.form-group.required:not(.checkbox) .control-label:after,
.form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */
content:"*";
color:red;
}
Nota: no probado
Debe usar la clase .text o apuntarlo de otra manera, pruebe este html:
<div class="form-group required">
<label class="col-md-2 control-label"> </label>
<div class="col-md-4">
<div class="checkbox">
<label class=''text''> <!-- use this class -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
Ok tercera edición:
CSS de vuelta a lo que era
.form-group.required .control-label:after {
content:"*";
color:red;
}
HTML:
<div class="form-group required">
<label class="col-md-2"> </label> <!-- remove class control-label -->
<div class="col-md-4">
<div class="checkbox">
<label class=''control-label''> <!-- use this class as the red * will be after control-label -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
.form-group .required .control-label:after probablemente debería ser .form-group.required .control-label:after . La eliminación del espacio entre .form-group y .required es el cambio.