Adding asterisk to required fields in Bootstrap 3

前端 未结 7 583
粉色の甜心
粉色の甜心 2021-01-29 17:56

My HTML has a class called .required that is assigned to required fields.

Here is the HTML:

相关标签:
7条回答
  • 2021-01-29 17:58

    The other two answers are correct. When you include spaces in your CSS selectors you're targeting child elements so:

    .form-group .required {
        styles
    }
    

    Is targeting an element with the class of "required" that is inside an element with the class of "form-group".

    Without the space it's targeting an element that has both classes. 'required' and 'form-group'

    0 讨论(0)
  • 2021-01-29 17:58

    This CSS worked for me:

    .form-group.required.control-label:before{
       color: red;
       content: "*";
       position: absolute;
       margin-left: -10px;
    }
    

    and this HTML:

    <div class="form-group required control-label">
      <label for="emailField">Email</label>
      <input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
    </div>
    
    0 讨论(0)
  • 2021-01-29 18:11

    .form-group .required .control-label:after should probably be .form-group.required .control-label:after. The removal of the space between .form-group and .required is the change.

    0 讨论(0)
  • 2021-01-29 18:11

    This works for me:

    CSS

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

    OR

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

    Basic HTML

    <div class="form-group required control-label">
      <input class="form-control" />
    </div>
    
    0 讨论(0)
  • 2021-01-29 18:17

    Assuming this is what the HTML looks like

    <div class="form-group required">
       <label class="col-md-2 control-label">E-mail</label>
       <div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
    </div>
    

    To display an asterisk on the right of the label:

    .form-group.required .control-label:after { 
        color: #d00;
        content: "*";
        position: absolute;
        margin-left: 8px;
        top:7px;
    }
    

    Or to the left of the label:

    .form-group.required .control-label:before{
       color: red;
       content: "*";
       position: absolute;
       margin-left: -15px;
    }
    

    To make a nice big red asterisks you can add these lines:

    font-family: 'Glyphicons Halflings';
    font-weight: normal;
    font-size: 14px;
    

    Or if you are using Font Awesome add these lines (and change the content line):

    font-family: 'FontAwesome';
    font-weight: normal;
    font-size: 14px;
    content: "\f069";
    
    0 讨论(0)
  • 2021-01-29 18:18

    Use .form-group.required without the space.

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

    Edit:

    For the checkbox you can use the pseudo class :not(). You add the required * after each label unless it is a checkbox

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

    Note: not tested

    You should use the .text class or target it otherwise probably, try this html:

    <div class="form-group required">
       <label class="col-md-2 control-label">&#160;</label>
       <div class="col-md-4">
          <div class="checkbox">
             <label class='text'> <!-- use this class -->
                <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
             </label>
          </div>
       </div>
    </div>
    

    Ok third edit:

    CSS back to what is was

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

    HTML:

    <div class="form-group required">
       <label class="col-md-2">&#160;</label> <!-- remove class control-label -->
       <div class="col-md-4">
          <div class="checkbox">
             <label class='control-label'> <!-- use this class as the red * will be after control-label -->
                <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
             </label>
          </div>
       </div>
    </div>
    
    0 讨论(0)
提交回复
热议问题