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

133

Cuál es una buena manera de superar el hecho desafortunado 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, todos los inputs requeridos obtendrían el pequeño asterisco que indica que el campo es requerido. 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 ( :aftera :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 que contiene, 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 donde 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 completados incorrectamente.

Por último, no agrega marcas adicionales.

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

brentonstrina
fuente
quizás aplicar una imagen de fondo de un asterisco?
Valamas
Para que el campo de entrada sea realmente necesario , agregue el requiredatributo a <input... developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…
tomByrer

Respuestas:

230

¿Eso es lo que tenías en mente?

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

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

Ver https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements

Max Girkens
fuente
2
Esa es una buena solución en muchas situaciones, sin embargo, no funciona si se utilizan posicionamientos absolutos o flotantes para alinear los formularios (por ejemplo, jsfiddle.net/erqrN/2 ). De hecho, estoy usando posicionamiento absoluto para alinear mis formularios. Podría posicionarlo absolutamente, *pero significaría que tendría que poner manualmente la distancia para cada entrada de formulario, y no podría tener ninguna entrada flexible.
brentonstrine
44
@brentonstrine Las probabilidades son, no deberías estar usando posicionamiento absoluto para alinear tus formularios. Aunque se usa comúnmente, el posicionamiento absoluto no responde (a menos que JS modifique el DOM al cambiar el tamaño), mientras que los mismos efectos siempre se pueden lograr usando una posición estática o relativa, que puede responder en el diseño. Lectores, evite usar estilos como el posicionamiento absoluto en elementos como los elementos de formulario, ya que este es un enfoque bastante arcaico para el posicionamiento. Sé que tu comentario era muy antiguo, pero esto es para los lectores.
WebWanderer
El asterisco no aparece con Lynx , lo que podría ser un problema de accesibilidad.
Dave Jarvis el
¿Puedo poner esto en mi .css? En caso afirmativo, ¿podría dar un ejemplo? No sabía eso : sintaxis
Leonardo Maffei
68
.required label {
    font-weight: bold;
}
.required label:after {
    color: #e32;
    content: ' *';
    display:inline;
}

Juega con tu estructura exacta: http://jsfiddle.net/bQ859/

laffuste
fuente
Todavía necesita clases en sus etiquetas, realmente la única forma de mantener ordenada la estructura del documento es el método de la imagen de fondo. Conciso sin embargo.
El gato de Henry
37

A pesar de que esta es la respuesta aceptada, por favor, hacer caso omiso de mí y utilizar la :aftersintaxis se sugiere a continuación. Mi solución no es accesible.


Se podría lograr un resultado similar utilizando una imagen de fondo de una imagen de un asterisco y estableciendo 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 colocar el mismo en div.requiredlugar de .required inputprobablemente sea más lo que está buscando, aunque sea un poco menos elegante.

Este método no requiere una entrada adicional.

jaypeagi
fuente
55
Sin embargo, vale la pena señalar que esto no es muy amigable para los lectores de pantalla. La respuesta de Max es mucho mejor a este respecto. De hecho, en la mayoría de los casos, la respuesta de Max es más ideal, pero no para el OP.
jaypeagi
20

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

ingrese la descripción de la imagen aquí

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 usando un diseño fijo, así que estaba bien para mí.

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

Tebe
fuente
Sí, se ve igual. La diferencia es que él usó la imagen de fondo. (o he entendido mal algo)
Tebe
2
agregar un margen de marcado vacío para algo como esto derrota todo el punto de css, ¿no?
Jason Silver
1
span no cuesta nada, es un truco común para simplificar las cosas que se encuentran con bastante frecuencia entre la gran cantidad de bibliotecas que he visto
Tebe
14

escribir en CSS

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

y HTML

<div class="form-group required">

    <label class="control-label">Name:</label>

    <input type="text">

</div>
Kondal
fuente
Creo que su enfoque solo funciona si asigna la clase de etiqueta de control en la etiqueta de etiqueta como <label class="control-label">...</label>. Pero hace el trabajo (Y)
Marcole
Solo le di un ejemplo de ejemplo de etiqueta de control de propósito Mr.creep-story
Kondal
Esto tiene la sintaxis de pseudoelementos más antigua y no hay necesidad de sopa div. He agregado una respuesta que mantiene la forma div y la clase libre.
Henry's Cat
12
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;
}
faisal
fuente
¿Por qué hay dos radial-gradienttérminos en background-image? No puedo obtener esta sintaxis para casarme con developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient, pero funciona correctamente cuando lo intento.
Chris Walsh
Esto se prefiere porque no requiere ningún marcado adicional para que funcione. Sin embargo, me gustaría ver una solución que utilizara :: after para obtener más opciones personalizables.
Jason Silver
10
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

ingrese la descripción de la imagen aquí

Y se ve así: ingrese la descripción de la imagen aquí

Kit de herramientas
fuente
Esto es inspirador, vea mi forma de evitar tener que cargar una imagen de fondo.
Henry's Cat
5

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>

Falah
fuente
5

Creo que esta es la manera 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> 
usuario2903536
fuente
Tenga en cuenta que el intervalo se aplica a la etiqueta de la etiqueta y no a la etiqueta de entrada. Si se aplica a la etiqueta de entrada, el asterisco rojo cae a la siguiente línea, que no es lo que la mayoría de los desarrolladores desearían
MarcoZen
5

Es 2019 y las respuestas anteriores a este problema no están utilizando

  1. Rejilla CSS
  2. Variables CSS
  3. Elementos de formulario HTML5
  4. SVG en CSS

La cuadrícula CSS es la forma de hacer formularios en 2019, ya que puede tener sus etiquetas precediendo a sus entradas sin tener divs, tramos, tramos con asteriscos y otras reliquias adicionales.

Aquí es donde vamos con CSS mínimo:

Captura de pantalla de ejemplo

El HTML para lo anterior:

<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
    <p class="form-instructions">Please enter the following information to create your account.</p>
    <label for="firstname">First name</label>
    <input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
    <label for="lastname">Last name</label>
    <input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
    <label for="email_address">Email address</label>
    <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" title="Password" required="">
    <label for="confirmation">Confirm password</label>
    <input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
    <input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
    <label for="is_subscribed">Subscribe to the newsletter</label>
    <input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
    <label for="remember_meGCJiRe0GbJ">Remember me</label>
    <p class="required">* Required</p>
    <button type="submit" title="Register">Register</button>
</form>

El texto de marcador de posición también se puede agregar y es muy recomendable. (Solo estoy respondiendo esta forma intermedia).

Ahora para las variables CSS:

--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');

--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');

El CSS para los elementos del formulario:

input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
    background-image: var(--icon-required);
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: contain;
}

input:valid {
    --icon-required: var(--icon-tick);
}

El formulario en sí debe estar en la cuadrícula CSS:

form {
    align-items: center;
    display: grid;
    grid-gap: var(--form-grid-gap);
    grid-template-columns: var(--form-grid-template-columns);
    margin: auto;
}

Los valores para las columnas se pueden establecer en 1fr autoo 1frcon cualquier cosa, como <p>etiquetas en el formulario configurado para abarcar 1 / -1. Cambia las variables en sus consultas de medios para que tenga los cuadros de entrada de ancho completo en dispositivos móviles y según lo anterior en el escritorio. También puede cambiar la brecha de la cuadrícula en el móvil si lo desea utilizando el enfoque de variables CSS.

Cuando las casillas son válidas, debería aparecer una marca verde en lugar del asterisco.

El SVG en CSS es una forma de evitar que el navegador tenga que hacer un viaje de ida y vuelta al servidor para obtener una imagen del asterisco. De esta manera, puede ajustar los asteriscos, los ejemplos aquí están en un ángulo inusual, puede editar esto ya que el ícono SVG anterior es completamente legible. El cuadro de vista también se puede modificar para colocar el asterisco encima o debajo del centro.

Gato de henry
fuente
1

.asterisc {
  display: block;
  color: red;
  margin: -19px 185px;
}
<input style="width:200px">
<span class="asterisc">*</span>

Vitaly Zdanevich
fuente
0

Este ejemplo pone un símbolo de asterisco delante de una etiqueta para denotar esa entrada particular como un campo obligatorio. Configuré las propiedades CSS usando% y em para asegurarme de que mi página web responde. Puede usar px u otras unidades absolutas si lo desea.

#name {
   display: inline-block;
   margin-left: 40%;
   font-size:25px;
    
}
.nameinput{
   margin-left: 10px;
   font-size:90%;
   width: 17em;
   
}

.nameinput::placeholder {
  font-size: 0.7em;
  vertical-align: middle;
}

#name p{
   margin:0;
   border:0;
   padding:0;
   display:inline-block;
   font-size: 40%;
   vertical-align: super;
}
<label id="name" value="name">
<p>*</p> 
Name:  <input class="nameinput" type="text" placeholder="Enter your name" required>
</label>

HARSHA UPPUTURI
fuente
Bienvenido a SO! Cuando coloque una respuesta con un nuevo punto de vista, intente explicar su respuesta, no solo coloque un código sin explicación.
David García Bodego
0

Lo que necesita es: selector requerido: seleccionará todos los campos con el atributo 'requerido' (por lo que no es necesario agregar clases adicionales). Luego, diseñe las entradas según sus necesidades. Puede usar el selector ': después' y agregar un asterisco en la forma sugerida entre otras respuestas

Esquife
fuente
-1

Puede lograr el resultado deseado encapsulando 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>
chateracks
fuente
-2

Para aquellos que terminan aquí, pero tienen jQuery:

// javascript / jQuery
$("label.required").append('<span class="red-star"> *</span>')

// css
.red-star { color: red; }
Andy Hayden
fuente
¿Por qué usar js si puedes lograr el mismo resultado sin js?
Vitaly Zdanevich
@VitalyZdanevich porque necesita cargar una imagen de fondo innecesaria con esa solución. Además, ya tengo js (como muchos otros también).
Andy Hayden