I am using bootstrap by default textbox taking full width of column and I want to put search icon at the end to textbox.
My code is like this:
<div class="container">
<div class="row">
<div class="form-group col-lg-4">
<label class="control-label">Name</label>
<input id="txtName" class="form-control input-sm" />
<span class="glyphicon glyphicon-search"></span>
</div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
I don't want to use input group.
Please suggest an alternate way or alternate html with css.
This question is related to
html
css
twitter-bootstrap
twitter-bootstrap-3
icons
You can do it in pure CSS using the :after pseudo-element and getting creative with the margins.
Here's an example, using Font Awesome for the search icon:
.search-box-container input {_x000D_
padding: 5px 20px 5px 5px;_x000D_
}_x000D_
_x000D_
.search-box-container:after {_x000D_
content: "\f002";_x000D_
font-family: FontAwesome;_x000D_
margin-left: -25px;_x000D_
margin-right: 25px;_x000D_
}
_x000D_
<!-- font awesome -->_x000D_
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>_x000D_
_x000D_
_x000D_
<div class="search-box-container">_x000D_
<input type="text" placeholder="Search..." />_x000D_
</div>
_x000D_
<input type="text" name="whatever" id="funkystyling" />
Here's the CSS for the image on the left:
#funkystyling {
background: white url(/path/to/icon.png) left no-repeat;
padding-left: 17px;
}
And here's the CSS for the image on the right:
#funkystyling {
background: white url(/path/to/icon.png) right no-repeat;
padding-right: 17px;
}
Adding a class with a width of 90% to your input element and adding the following input-icon class to your span would achieve what you want I think.
.input { width: 90%; }
.input-icon {
display: inline-block;
height: 22px;
width: 22px;
line-height: 22px;
text-align: center;
color: #000;
font-size: 12px;
font-weight: bold;
margin-left: 4px;
}
EDIT Per dan's suggestion, it would not be wise to use .input as the class name, some more specific would be advised. I was simply using .input as a generic placeholder for your css
I liked @KyleMit's answer on how to make an unstyled input group, but in my case, I only wanted the right side unstyled - I still wanted to use an input-group-addon on the left side and have it look like normal bootstrap. So, I did this:
css
.input-group.input-group-unstyled-right input.form-control {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.input-group-unstyled-right .input-group-addon.input-group-addon-unstyled {
border-radius: 4px;
border: 0px;
background-color: transparent;
}
html
<div class="input-group input-group-unstyled-right">
<span class="input-group-addon">
<i class="fa fa-envelope-o"></i>
</span>
<input type="text" class="form-control">
<span class="input-group-addon input-group-addon-unstyled">
<i class="fa fa-check"></i>
</span>
</div>
Source: Stackoverflow.com