Use CSS para adicionar automaticamente o asterisco do 'campo obrigatório' para formar entradas

Qual é uma boa maneira de superar o infeliz fato de que este código não funcionará como desejado:

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

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

Em um mundo perfeito, todos os inputs necessários receberiam o pequeno asterisco indicando que o campo é obrigatório. Esta solução é impossível, pois o CSS é inserido após o conteúdo do elemento, não após o próprio elemento, mas algo como isso seria ideal. Em um site com milhares de campos obrigatórios, posso mover o asterisco na frente da entrada com uma alteração em uma linha ( :afterpara :before) ou movê-lo para o final do rótulo ( .required label:after) ou na frente do rótulo ou para uma posição na caixa contendo, etc ...

Isso é importante não apenas no caso de eu mudar de idéia sobre onde colocar o asterisco em qualquer lugar, mas também em casos estranhos em que o layout do formulário não permite o asterisco na posição padrão. Ele também funciona bem com a validação que verifica o formulário ou destaca os controles preenchidos incorretamente.

Por fim, ele não adiciona marcação adicional.

Existem boas soluções que tenham todas ou a maioria das vantagens do código impossível?

É isso que você tinha em 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">

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

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

Brinque com sua estrutura exata: http://jsfiddle.net/bQ859/

Embora esta seja a resposta aceita, por favor me ignorar e usar a :aftersintaxe sugerida abaixo. Minha solução não está acessível.

Um resultado semelhante pode ser alcançado usando a imagem de plano de fundo da imagem de um asterisco e definindo o plano de fundo da etiqueta / entrada / div externa e um preenchimento do tamanho da imagem do asterisco. Algo assim:

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

Isso colocará o asterisco DENTRO da caixa de texto, mas colocar o mesmo em div.requiredvez de .required inputprovavelmente será mais o que você está procurando, se um pouco menos elegante.

Este método não requer uma entrada adicional.

Para colocá-lo exatamente na entrada, como é mostrado na imagem a seguir:

Eu encontrei a seguinte abordagem:

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

O site no qual trabalho é codificado usando o layout fixo, portanto, tudo bem para mim.

Não tenho certeza de que seja bom para o design de líquidos.

escrever em CSS

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

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

A imagem possui um espaço de 20 px à direita para não se sobrepor à seta suspensa selecionada

E fica assim:

Use jQuery e 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>

Eu acho que essa é a maneira mais eficiente de fazer, por que tanta dor de cabeça

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

É 2019 e as respostas anteriores para este problema não estão usando

1. Grade CSS
2. Variáveis ​​CSS
3. Elementos de formulário HTML5
4. SVG em CSS

A grade CSS é a maneira de criar formulários em 2019, pois você pode ter seus rótulos precedendo suas entradas sem ter divs, extensões, extensões com asteriscos e outras relíquias.

Aqui é onde estamos indo com o mínimo de CSS:

O HTML para o acima:

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

O texto do espaço reservado também pode ser adicionado e é altamente recomendado. (Estou apenas respondendo a este formulário).

Agora, para as variáveis ​​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>');

O CSS para os elementos do formulário:

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

O próprio formulário deve estar na grade CSS:

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

Os valores para as colunas podem ser configurados para 1fr autoou 1frcom algo como<p> tags no formulário definido para estender 1 / -1. Você altera as variáveis ​​nas consultas de mídia para ter as caixas de entrada com largura total no celular e conforme acima no computador. Você também pode alterar sua diferença de grade no celular, se desejar, usando a abordagem de variáveis ​​CSS.

Quando as caixas são válidas, você deve obter uma marca verde em vez do asterisco.

O SVG em CSS é uma maneira de evitar que o navegador faça uma ida e volta ao servidor para obter uma imagem do asterisco. Dessa forma, você pode ajustar os asteriscos, os exemplos aqui estão em um ângulo incomum; você pode editar isso porque o ícone SVG acima é totalmente legível. A caixa de visualização também pode ser alterada para colocar o asterisco acima ou abaixo do centro.

Este exemplo coloca um símbolo de asterisco na frente de um rótulo para indicar essa entrada específica como um campo obrigatório. Defino as propriedades CSS usando% e em para garantir que minha página da web seja responsiva. Você pode usar px ou outras unidades absolutas, se desejar.

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

O que você precisa é: seletor obrigatório - selecionará todos os campos com o atributo 'obrigatório' (portanto, não é necessário adicionar nenhuma classe adicional). Depois, estilize as entradas de acordo com suas necessidades. Você pode usar o seletor ': after' e adicionar asterisco da maneira sugerida entre outras respostas

Você pode obter o resultado desejado encapsulando o código HTML em uma tag div que contém a classe "required" seguida da classe "form-group". * No entanto, isso funciona apenas se você tiver o Bootstrap.

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

Para quem acaba aqui, mas tem o jQuery:

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

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