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

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?

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

.required:after {
  content:" *";
  color: red;
}

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

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

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

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

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.

Para ponerlo exactamente EN la entrada 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 usando un diseño fijo, así que estaba bien para mí.

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

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>

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

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í:

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>

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> 

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:

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.

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>

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

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>

Para aquellos que terminan aquí, pero tienen jQuery:

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

// css
.red-star { color: red; }