Unable to get input with icon effect in Bootstrap 3

Question

I can't get the same effect of the input with the feedback icon as listed on the Bootstrap documentation http://getbootstrap.com/css/#forms-control-validation under the "with optional icons" section.

Here's 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 some JS to change the icons of checkmark, cross, and warning, but it is not relevant since I can get that to work once I get the basic template going.

Basically, the code outputs indeed the green input box, the green label, and the checkmark but in white and down below the input field (not inside, but outside). What I actually am interested in is to get only the checkmark INSIDE the input field. I am not interested in coloring neither the input field's outlining nor the label.

I read this "warning" below the section's title in the documentation and it said:

Icons, labels, and input groups Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. For inputs without labels, adjust the topvalue. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.

Apparently I kinda have to add an input group, which I tried, but did not work.

Thank you very much for your time and help! Any help/tips/suggestions will be appreciated.

Answer 1

You missed the class="form-horizontal" from the form tag.

It should be

<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

To color them all black (instead of green) you could do this additionally:

CSS

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

UPDATED DEMO