How to display asterisk in fields with required with css?

Question

How to display asterisk in fields with required with css?

Navigation

#1 by (11 votes)

7

I have a form with some mandatory fields and some not. How can I automatically insert an asterisk into the label of each field with required via css?

<div class="form-group col-md-4">
        <label for="cod_produto">Código do Produto</label>
        <input type="text" class="form-control" name="cod_produto" id="cod_produto" required placeholder="Código do Produto">
    </div>
    <div class="form-group col-md-4">
        <label for="qtde_acertada">Quantidade Acertada</label>
        <input type="text" class="form-control" name="qtde_acertada" id="qtde_acertada" placeholder="Quantidade Acertada">
    </div>

html5 css bootstrap-3

asked by anonymous 27.07.2016 / 21:36

1 answer

Separate values from each array What is the difference between wait () and sleep ()?

score 11 · Accepted Answer

To do with css you can add a class (in this case I chose required ) to the elements that you want to have with the asterisk, and configure this class with pseudo element after , examples:

Before input :

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

<div class="form-group col-md-4">
  <label for="cod_produto" class="required">Código do Produto</label>
  <input type="text" class="form-control" name="cod_produto" id="cod_produto" required placeholder="Código do Produto">
</div>
<div class="form-group col-md-4">
  <label for="qtde_acertada">Quantidade Acertada</label>
  <input type="text" class="form-control" name="qtde_acertada" id="qtde_acertada" placeholder="Quantidade Acertada">
</div>

After input :

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

<div class="form-group col-md-4 required">
  <label for="cod_produto">Código do Produto</label>
  <input type="text" class="form-control required" name="cod_produto" id="cod_produto" required placeholder="Código do Produto">
</div>
<div class="form-group col-md-4">
  <label for="qtde_acertada">Quantidade Acertada</label>
  <input type="text" class="form-control" name="qtde_acertada" id="qtde_acertada" placeholder="Quantidade Acertada">
</div>