Is there a way to use CSS to update input fields without changing HTML code?
I have a form like this:
// HTML
<div id="LoginFormContainer">
<div class="formInputLine">
<div class="inputContainer">
<input name="txtUserID$Textbox1" type="text" maxlength="15" id="txtUserID_Textbox1" placeholder="Username" title="Username">
</div>
</div>
<div class="formInputLine">
<div class="inputContainer">
<input name="txtPassword$Textbox1" type="password" maxlength="15" id="txtPassword_Textbox1" placeholder="Password" title="Password">
</div>
</div>
<div class="formInputLine">
<input type="submit" name="btnLogin" value="Login" id="btnLogin"><input name="builderID" type="hidden" id="builderID" value="abc">
</div>
</div>
//CSS
#FormLoginPage #LoginFormContainer .formInputLine .inputContainer input {
text-transform: uppercase!important;
}
#FormLoginPage #LoginFormContainer .formInputLine .inputContainer input {
border: none;
font-size: 12px;
width: 100%;
color: #333;
outline: 0;
-webkit-appearance: caret;
}
// TRYING CSS - able to use this code to add a label but it applies to all input. Not sure how to target only the individual class with a specific id within it.
.formInputLine::before {
content: "Username";
}
And would like to change it to the following using only CSS:
Please note that the above code is actually part of this code I got from a 3rd party. So I am not sure if I can control it via the iframe tag.
Thanks for the help, I greatly appreciate it.
If the input fields have wrapper elements you can use pseudo elements (before or after) on that wrapper to create what you want with pure css, otherwise you'll have to use javascript to manipulate the html structure / add elements etc.
So, for an example, if we have the following HTML structure:
<div class="input-wrapper">
<input type="text" placeholder="some text">
</div>
We can do the following in CSS:
.input-wrapper {
position: relative;
}
.input-wrapper:before {
position: absolute;
left: 0;
bottom: calc( 100% + 10px );
content: "some text";
}
::-webkit-input-placeholder {
color: transparent !important;
}
(This one is used if we have a placeholder and we want to hide it. On production should also use the -moz- and -ms- prefixes).
You could have something like this:
I've included my own font, due to lack of context.
body {font-family: "Droid Sans"}
.Input-Element {padding: .3em;margin: .5em 0}
.Input-Element label {display: block;text-transform: uppercase;padding: .2em 0;font-size: .8em}
.Input-Element input {border:1px solid rgba(0, 0, 0, 0.34);padding:.5em;outline:none;transition: border .25s}
.Input-Element input:focus {border-color: rgba(0, 0, 0, 0.73)}
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<div class='Input-Element'>
<label>Username</label>
<input name='user'>
</div>
<div class='Input-Element'>
<label>Password</label>
<input name='psw'>
</div>
Note: Click Run Code Snippet to see the form!
I was playing with the ideas provided by a few solutions here. After some researching on my own with :nth-child, here is the solution I have for my question. I am sure there is an other way to do the CSS selection. But this is what I have for now.
Using the CSS below can target the two fields individually and add the specific labels
/* add labels */
.formInputLine:nth-child(1)::before {
content: "Username";
}
.formInputLine:nth-child(2)::before {
content: "Password";
}
/* remove place holder */
::-webkit-input-placeholder {
color: transparent;
}
:-moz-placeholder {
/* Firefox 18- */
color: transparent;
}
::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
}
:-ms-input-placeholder {
color: transparent;
}
You can use some jquery and css
$("input").wrap("<div class='custom-input'></div>");
$('.custom-input').eq(0).before("<label>USER NAME</label>");
$('.custom-input').eq(1).before("<label>PASSWORD</label>");
::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" valu "USER NAME" placeholder="USER NAME"><br>
<input type="passsword" placeholder="PASSWORD">
My html:
<div class="product-addon product-addon-extra-tip">
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
<label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2">2</label>
</p>
<p class="form-row form-row-wide addon-wrap-2004-extra-donation-to-trafficking-survivors-0-1">
<label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="5">5</label>
</p>
</div>
I'm trying to style these radio inputs to look like buttons, and I'm almost there. The problem is that given the current construct (which I can't directly change), I can't figure out how to make the :checked option look different than the rest.
You can see in the jsfiddle where I'm falling short. Is this possible?
http://jsfiddle.net/2gdotu21/1/
Via CSS, input set in front of label and correct attribute used, you can apply a different style if input is :checked or not.
See: https://www.w3.org/wiki/HTML/Elements/label & further more https://www.w3.org/TR/WCAG20-TECHS/H44.html
label {/* button unchecked add your style*/
color:red
}
label:before {/* button checked add your style*/
content:'$';
font-size:1rem;
}
input:checked + label {
color:green;
}
[type=radio]{ /* hide it ? use any methode but display:none; */
position:absolute;
right:200%;
}
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[]" />
<label for="addon-2004-extra-tip-0[]">2</label>
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[1]" />
<label for="addon-2004-extra-tip-0[1]">300</label>
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[2]" />
<label for="addon-2004-extra-tip-0[2]">14</label>
<!-- same name to allow only one checked in this demo -->
else with your structure, integrate the radio within the design of the button http://codepen.io/gc-nomade/pen/LketK (oldish glassy button)
example of your code to change bg color
.product-addon-extra-tip label {
float: left;
width: auto;
min-width: 60px;
margin: 3px;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
color: black;
font-size: 1.2rem;
text-align: center;
padding: 5px 0;
display: block;
line-height: 1.3rem;
}
.product-addon-extra-tip label input {}
.product-addon-extra-tip label:before {
content: '$';
}
label {
position: relative;
}
input {
position: absolute;
top: -15px;
z-index: -1;
box-shadow: 0 0 0 200px tomato;
}
input:checked {
box-shadow: 0 0 0 200px green;
}
<div class="product-addon product-addon-extra-tip">
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
<label><input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="0" data-price="" value="2"> 2 </label>
</p>
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-1">
<label><input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="0" data-price="" value="5"> 5 </label>
</p>
</div>
Is it posible to make an input checkbox a Bootstrap glyphicon?
I want to make up the default checkboxes with a nice Bootstrap glyphicon.
For example: glyphicon glyphicon-unchecked and when checked: glyphicon glyphicon-check.
I've tried this:
input[type='checkbox'] {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e157";
}
But nothing happened..
I don't know if that's posible?
You can achieve that in a couple of methods:
Method 1
inside a <label> tag, two <tags> that represent the icons that you want need to be placed(or outside, per use scenario)
then toggle these two <tags>, when the input[type='checkbox'] is checked or unchecked
done.
Method 2
a cleaner approach to the above one, would be to use the css from bootstraps icons, and place them in a :before(or :after depending on your scenarion) on the <label> tag
then toggle the content prop. of the :before class, that the icons that you want have, when the input[type='checkbox'] is checked or unchecked
done.
Check out the demo here and also, a couple of more through documentation on this matter:
Add boostrap icon to input boxes
Boostrap checkbox documentation
If you're able to modify your markup a bit, this should do:
<label for="myCheckbox" class="glyphy">
<input type="checkbox" id="myCheckbox" />
<span class="glyphicon glyphicon-unchecked"></span>
label words
</label>
$('.glyphy').click(function (e) {
if ($(e.target).is('input')) { // prevent double-event due to bubbling
$(this).find('.glyphicon').toggleClass('glyphicon-check glyphicon-unchecked');
}
});
Demo
if you have the icons, you can style it as such: http://jsfiddle.net/swm53ran/164/
/*hide checkbox and radio buttons*/
input[type=checkbox],
input[type=radio] {
width: 2em;
margin: 0;
padding: 0;
font-size: 1em;
opacity: 0; /*This is the part tht actually hides it*/
}
/*normalize the spacing*/
input[type=checkbox] + label,
input[type=radio] + label {
display: inline-block;
margin-left: -2em;
line-height: 1.5em;
}
/*unchecked css*/
input[type=checkbox] + label > span,
input[type=radio] + label > span {
display: inline-block;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Face-sad.svg/48px-Face-sad.svg.png');
width: 50px;
height: 50px;
}
/*selected checkbox css*/
input[type=checkbox]:checked + label > span > span {
width: 50px;
height: 50px;
display:block;
background-image: url('http://wscont1.apps.microsoft.com/winstore/1x/a14c3995-34d7-454c-82e2-0c192e48b91a/Icon.173718.png');
}
/*selected radio css*/
input[type=radio]:checked + label > span > span {
width: 50px;
height: 50px;
display:block;
background-image: url('http://wscont1.apps.microsoft.com/winstore/1x/a14c3995-34d7-454c-82e2-0c192e48b91a/Icon.173718.png');
}
<div>
<input id="check1" type="checkbox" name="check1" value="check1" />
<label for="check1"><span><span></span></span>Checkbox</label>
</div>
<div>
<input id="radio1" type="radio" name="radio" value="radio1" />
<label for="radio1"><span><span></span></span>Radio1</label>
</div>
<div>
<input id="radio2" type="radio" name="radio" value="radio2" />
<label for="radio2"><span><span></span></span>Radio2</label>
</div>
I am working in Bootstrap 3 and am trying to get a calendar icon inside the right hand side of the input box.
My html looks like this:
<div class="col-md-12">
<div class='right-inner-addon col-md-2 date datepicker'
data-date-format="yyyy-mm-dd">
<input name='name' value="" type="text" class="form-control date-picker"
data-date-format="yyyy-mm-dd"/>
<i class="fa fa-calendar"></i>
</div>
</div>
I have tried position: absolute like this:
.right-inner-addon i {
position: absolute;
right: 5px;
top: 10px;
pointer-events: none;
font-size: 1.5em;
}
.right-inner-addon {
position: relative;
}
But when I do it will look great in one spot, but will not be positioned correctly in another instance.
I have also tried to see if I could use text-indent to see if this would work throughout, but it had the same effect.
.right-inner-addon i,
.form-group .right-inner-addon i {
display: inline-block;
z-index: 3;
text-indent: -15px;
font-size: 1.3em;
}
Here's a jsFiddle that might help
Using bootstrap's native validation states is probably preferable to writing custom CSS here.
And I'm pretty sure that I'm the one who came up with the CSS in question.
Just use .has-feedback on your form-group and .form-control-feedback on your icon:
<div class="form-group has-feedback">
<label class="control-label sr-only">DatePicker</label>
<input type="text" class="form-control date-picker" />
<i class="fa fa-calendar form-control-feedback"></i>
</div>
Demo in jsFiddle
You can use input-group add-on with a input-group-btn.
<div class="col-md-12">
<div class='input-group add-on col-md-2 date datepicker'
data-date-format="yyyy-mm-dd">
<input name='name' value="" type="text" class="form-control date-picker"
data-date-format="yyyy-mm-dd"/>
<div class="input-group-btn">
<button class="btn btn-default">
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
</div>
With a little CSS to hide the button border:
/* remove border between controls */
.add-on .input-group-btn > .btn {
border-left-width: 0;
left:-2px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/* stop the glowing blue shadow */
.add-on .form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color:#cccccc;
}
Demo: http://bootply.com/128059
Check this fiddle, adapted from this answer
The difference being that in your case the <i> was placed after <input>. Swapping them makes it work. That's why the positioning was creating a mess as opposed to the cited answer.
In above answers, Input click works but click on i tag is not working.
so I have added my code in answer of #KyleMit
<div class="form-group has-feedback">
<input type="text" name="txtDatepicker" class="form-control date-picker" />
<i class="glyphicon glyphicon-calendar"
onclick="javascript:$('input[name=txtDatepicker]').data('DateTimePicker').show();">
</i>
</div>
I changed css little bit for my UI. You also can change it.
<style>
.right-inner-addon {
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon i {
position: absolute;
left: 256px;
padding: 14px 12px;
}
</style>
How can I add a glyphicon to a text type input box? For example I want to have 'icon-user' in a username input, something like this:
Without Bootstrap:
We'll get to Bootstrap in a second, but here's the fundamental CSS concepts in play in order to do this yourself. As beard of prey points out, you can do this with CSS by absolutely positioning the icon inside of the input element. Then add padding to either side so the text doesn't overlap with the icon.
So for the following HTML:
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-user"></i>
<input type="text" class="form-control" />
</div>
You can use the following CSS to left and right align glyphs:
/* enable absolute positioning */
.inner-addon {
position: relative;
}
/* style icon */
.inner-addon .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
}
/* align icon */
.left-addon .glyphicon { left: 0px;}
.right-addon .glyphicon { right: 0px;}
/* add padding */
.left-addon input { padding-left: 30px; }
.right-addon input { padding-right: 30px; }
Demo in Plunker
Note: This presumes you're using glyphicons, but works equally well with font-awesome.
For FA, just replace .glyphicon with .fa
With Bootstrap:
As buffer points out, this can be accomplished natively within Bootstrap by using Validation States with Optional Icons. This is done by giving the .form-group element the class of .has-feedback and the icon the class of .form-control-feedback.
The simplest example would be something like this:
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
Pros:
Includes support for different form types (Basic, Horizontal, Inline)
Includes support for different control sizes (Default, Small, Large)
Cons:
Doesn't include support for left aligning icons
To overcome the cons, I put together this pull-request with changes to support left aligned icons. As it is a relatively large change, it has been put off until a future release, but if you need these features today, here's a simple implementation guide:
Just include the these form changes in css (also inlined via hidden stack snippet at the bottom)*LESS: alternatively, if you are building via less, here's the form changes in less
Then, all you have to do is include the class .has-feedback-left on any group that has the class .has-feedback in order to left align the icon.
Since there are a lot of possible html configurations over different form types, different control sizes, different icon sets, and different label visibilities, I created a test page that shows the correct set of HTML for each permutation along with a live demo.
Here's a demo in Plunker
P.S. frizi's suggestion of adding pointer-events: none; has been added to bootstrap
Didn't find what you were looking for? Try these similar questions:
Add Twitter Bootstrap icon to Input box
Put search icon near textbox bootstrap
Addition CSS for Left Aligned feedback icons
.has-feedback .form-control {
padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
padding-right: 46px;
}
.has-feedback-left .form-control {
padding-right: 12px;
padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
left: 0;
}
.form-control-feedback {
line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
width: 30px;
height: 30px;
line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
width: 46px;
height: 46px;
line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
top: 0;
}
#media (min-width: 768px) {
.form-inline .inline-feedback {
position: relative;
display: inline-block;
}
.form-inline .has-feedback .form-control-feedback {
top: 0;
}
}
.form-horizontal .has-feedback-left .form-control-feedback {
left: 15px;
}
The official method. No custom CSS required :
<form class="form-inline" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4"></label>
<input type="text" class="form-control" id="inputSuccess4">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
</form>
DEMO : http://jsfiddle.net/yajf3b7q
This demo is based on an example in Bootstrap docs. Scroll down to "With Optional Icons" here http://getbootstrap.com/css/#forms-control-validation
Here's a CSS-only alternative. I set this up for a search field to get an effect similar to Firefox (& a hundred other apps.)
Here's a fiddle.
HTML
<div class="col-md-4">
<input class="form-control" type="search" />
<span class="glyphicon glyphicon-search"></span>
</div>
CSS
.form-control {
padding-right: 30px;
}
.form-control + .glyphicon {
position: absolute;
right: 0;
padding: 8px 27px;
}
It can be done using classes from the official bootstrap 3.x version, without any custom css.
Use input-group-addon before the input tag, inside of input-group then use any of the glyphicons, here is the code
<form>
<div class="form-group">
<div class="col-xs-5">
<div class="input-group">
<span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
<input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
</div>
</div>
</div>
</form>
Here is the output
To customise it further add a couple of lines of custom css to your own custom.css file (adjust padding if needed)
.transparent {
background-color: transparent !important;
box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
}
.left-border-none {
border-left:none !important;
box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
}
By making the background of the input-group-addon transparent and making the left gradient of the input tag to zero the input will have a seamless appearance. Here is the customised output
Here is a jsbin example
This will solve the custom css problems of overlapping with labels, alignment while using input-lg and focus on tab issue.
Here is how I did it using only the default bootstrap CSS v3.3.1:
<div class="form-group">
<label class="control-label">Start:</label>
<div class="input-group">
<input type="text" class="form-control" aria-describedby="start-date">
<span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
And this is how it looks:
If you are using Fontawesome you can do this :
<input type="text" style="font-family:Arial, FontAwesome" placeholder="" />
Result
The complete list of unicode can be found in the The complete Font Awesome 4.6.3 icon reference
This 'cheat' will work with the side effect that the glyphicon class will change the font for the input control.
Fiddle
<input class="form-control glyphicon" type="search" placeholder=""/>
If you want to get rid of the side effect you can remove the "glyphicon" class and add the following CSS (There may be a better way to style the placeholder pseudo element and I've only tested on Chrome).
Fiddle
.form-control[type="search"]::-webkit-input-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
Possibly an even cleaner solution:
Fiddle
CSS
.form-control.glyphicon {
font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
font-family:"Glyphicons Halflings";
}
HTML
<input class="form-control glyphicon" type="search" placeholder=" search" />
<input class="form-control glyphicon" type="text" placeholder=" username" />
<input class="form-control glyphicon" type="password" placeholder=" password" />
Here is a non-bootstrap solution that keeps your markup simple by embedding the image representation of the glyphicon directly in the CSS using base64 URI encoding.
input {
border:solid 1px #ddd;
}
input.search {
padding-left:20px;
background-repeat: no-repeat;
background-position-y: 1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">
input {
border:solid 1px #ddd;
}
input.search {
padding-left:20px;
background-repeat: no-repeat;
background-position-y: 1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">
Here's another way to do it by placing the glyphicon using the :before pseudo element in CSS.
Working demo in jsFiddle
For this HTML:
<form class="form form-horizontal col-xs-12">
<div class="form-group">
<div class="col-xs-7">
<span class="usericon">
<input class="form-control" id="name" placeholder="Username" />
</span>
</div>
</div>
</form>
Use this CSS (Bootstrap 3.x and Webkit-based browsers compatible)
.usericon input {
padding-left:25px;
}
.usericon:before {
height: 100%;
width: 25px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
position: absolute;
content: "\e008";
font-family: 'Glyphicons Halflings';
pointer-events: none;
}
As #Frizi said, we have to add pointer-events: none; so that the cursor doesn't interfere with the input focus. All the others CSS rules are for centering and adding the proper spacing.
The result:
You can use its Unicode HTML
So to add a user icon, just add to the placeholder attribute, or wherever you want it.
You may want to check this cheat sheet.
Example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder=" placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value=" value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value=" submit-button" style="font-family: 'Glyphicons Halflings', Arial">
Don't forget to set the input's font to the Glyphicon one, using the
following code: font-family: 'Glyphicons Halflings', Arial, where
Arial is the font of the regular text in the input.
Tested with Bootstrap 4.
Take a form-control, and add is-valid to its class. Notice how the control turns green, but more importantly, notice the checkmark icon on the right of the control? This is what we want!
Example:
.my-icon {
padding-right: calc(1.5em + .75rem);
background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
background-repeat: no-repeat;
background-position: center right calc(.375em + .1875rem);
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-5">
<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
</div>
</div>
I also have one decision for this case with Bootstrap 3.3.5:
<div class="col-sm-5">
<label for="date">
<input type="date" placeholder="Date" id="date" class="form-control">
</label>
<i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>
On input I have something like this:
Here's how it works in pure Bootstrap 5:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>iconbutton</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="d-flex flex-row align-items-center m-4 border rounded">
<i class="fa-solid fa-search mx-2"></i>
<input type="text" class="form-control border-0" placeholder="Search">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
To remove the border that appears on focus, add shadow-0 to the input.
If you are fortunate enough to only need modern browsers: try css transform translate. This requires no wrappers, and can be customized so that you can allow more spacing for input[type=number] to accomodate the input spinner, or move it to the left of the handle.
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
.is-invalid {
height: 30px;
box-sizing: border-box;
}
.is-invalid-x {
font-size:27px;
vertical-align:middle;
color: red;
top: initial;
transform: translateX(-100%);
}
<h1>Tasty Field Validation Icons using only css transform</h1>
<label>I am just a poor boy nobody loves me</label>
<input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>
http://codepen.io/anon/pen/RPRmNq?editors=110
You should be able to do this with existing bootstrap classes and a little custom styling.
<form>
<div class="input-prepend">
<span class="add-on">
<i class="icon-user"></i>
</span>
<input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
</div>
Edit The icon is referenced via the icon-user class. This answer was written at the time of Bootstrap version 2. You can see the reference on the following page: http://getbootstrap.com/2.3.2/base-css.html#images