Unable to get icon effect input in Bootstrap 3

I cannot get the same effect from input with a feedback icon, as indicated in the Bootstrap documentation http://getbootstrap.com/css/#forms-control-validation in the "with additional icons" section.

Here is my code:

  <form role="form" method="post" id="reg_form"> <!-- Reg form -->
    <div class="form-group has-success has-feedback">
    <label for="username-r" class="col-sm-3 control-label mLabelText">Username</label>
      <div class="col-sm-8 form-space">
          <input type="text" class="form-control" id="username-r" placeholder="Enter your username" />
          <span class="glyphicon glyphicon-ok form-control-feedback" id="username-fg-sp"></span> 
        <small>Must be between 4-20 characters long</small>   
      </div>
    </div>
  </form> <!-- //Reg form -->

And below that I have JS to change the checkmark, cross and warning icons, but that doesn’t matter, since I can get this to work as soon as I get the basic template.

In principle, the code really displays a green input field, a green label and a check mark, but in white and below the input field (not inside, but outside). I am really interested in getting only the "INSIDE" field in the input field. I am not interested in not coloring the input field or label.

"" , :

, . . .

-, , , .

! // .

+4
1

class="form-horizontal" .

<form role="form" method="post" class="form-horizontal" id="reg_form"> <!-- Reg form -->
     <div class="form-group has-success has-feedback">
     <label for="username-r" class="col-sm-3 control-label mLabelText">Username</label>
       <div class="col-sm-8 form-space">
           <input type="text" class="form-control" id="username-r" placeholder="Enter your username" />
           <span class="glyphicon glyphicon-ok form-control-feedback" id="username-fg-sp"></span> 
           <small>Must be between 4-20 characters long</small>   
       </div>
     </div>
</form> <!-- //Reg form -->

DEMO

( ), :

CSS

.mLabelText, #username-r, #username-fg-sp {
    color: #000 !important;
    border-color: #000;
  }

+3

Source: https://habr.com/ru/post/1532772/


All Articles