Saltar al contenido

Agregar asterisco a los campos obligatorios en Bootstrap 3

Si encuentras alguna incompatibilidad con tu código o trabajo, recuerda probar siempre en un ambiente de testing antes aplicar el código al trabajo final.

Solución:

Usar .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 pseudo clase :not(). 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

Debería usar la clase .text o apuntarla de otra manera probablemente, pruebe este html:

Ok tercera edición:

CSS de vuelta a lo que era

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

HTML:

Asumiendo que así es como se ve el HTML

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";

.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.

Aquí tienes las reseñas y puntuaciones

Finalizando este artículo puedes encontrar las críticas de otros gestores de proyectos, tú todavía eres capaz dejar el tuyo si lo deseas.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *