Created
May 20, 2014 14:37
-
-
Save marcvdm/b0afba7380c22beb3140 to your computer and use it in GitHub Desktop.
Adding icons inside form elements for bootstrap 3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="form-group has-error"> | |
<label for="exampleInputEmail1">Email address</label> | |
<div class="form-addon-left"> | |
<i class="glyphicon glyphicon-envelope form-control-feedback"></i> | |
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> | |
</div> | |
</div> | |
<div class="form-group"> | |
<label for="exampleInputEmail1">Email address</label> | |
<div class="form-addon-right"> | |
<i class="glyphicon glyphicon-user form-control-feedback"></i> | |
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.form-group { | |
.form-addon-left,.form-addon-right { | |
position: relative; | |
i { | |
position: absolute; | |
padding: 9px 11px; | |
pointer-events: none; | |
} | |
} | |
.form-addon-left { | |
input { | |
padding-left: 32px; | |
} | |
} | |
.form-addon-right { | |
input { | |
padding-right: 32px; | |
} | |
i { | |
right: 0px; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment