How to remove the lines around the icon like place the icon inside the searchbox I tried background transparent border 0 still not working the border are still there
here's what I did
<center>
<div class="input-group col-xs-4 col-md-6" >
<input type="text" name="search" id="search-building" class="form-control" placeholder="Search..." required>
<div class="input-group-addon">
<i class="fas fa-search"></i>
</div>
</div>
</center>
CSS
.input-group-addon{
border:0;
background:white;
pointer-events: none;
}
Your css class rules aren't being applied because of the specificity... to solve it add a parent to your selector..
.input-group .input-group-addon{
border:0;
background:white;
pointer-events: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="input-group col-xs-4 col-md-6" >
<input type="text" name="search" id="search-building" class="form-control" placeholder="Search..." required>
<div class="input-group-addon">
<i class="fas fa-search"></i>
</div>
Check this out.
UPDATED:
Changed as per the discussion below.
.input-group input {
border-right: none;
}
.input-group .input-group-addon {
background: inherit;
}
div {
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div>
<center>
<div class="input-group col-xs-4 col-md-6" >
<input type="text" name="search" id="search-building" class="form-control" placeholder="Search..." required>
<div class="input-group-addon">
<i class="fa fa-search"></i>
</div>
</div>
</center></div>
Related
<div class="card">
<div class="col-md-12">
<span style="margin-left:20px;">
<input rows="4" cols="50" type="text" name="box" id="box" style="width:50px;float:left;"></span>
</span>
<i class="fa fa-long-arrow-left" style="font-size:36px;vertical-align:-19%;color:green"></i>
<span>
<input type="text" name="boxx" id="boxx" style="width:200px;">
</span>
<i class="fa fa-long-arrow-right" style="font-size:48px;color:green"></i>
<span style="margin-right:20px;">
<input rows="4" cols="50" type="text" name="box" id="box" style="width:50px;float:right;">
</span>
</div>
</div>
i want to align the middle textbox in the center of the div and the icon should be close to the textbox.
You set the font size of the second < i > to 48 and caused this error. And I changed the bootstrap classes to a row with 3 cols 3-6-3. make sure that your bootstrap references were referenced well :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class ="row">
<div class="col-sm-3">
<span>
<input rows="4" cols="50" type="text" name="box" id="box" style="width:50px;float:left;"></span>
</span>
<i class="fa fa-long-arrow-left" style="font-size:36px;color:green"></i>
</div>
<div class="col-sm-6">
<span>
<input type="text" name="boxx" id="boxx" style="width:200px;">
</span>
<i class="fa fa-long-arrow-right" style="color:green"></i>
</div>
<div class="col-sm-3">
<span>
<input rows="4" cols="50" type="text" name="box" id="box" style="width:50px;float:right;">
</span>
</div>
</div>
You can use display: flex to center everything :
.col-md-12 {
display: flex;
align-items: center;
}
#input-left {
width:50px;
}
#input-center {
width:200px;
}
#input-right {
width:50px;
}
.middle-box {
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
.fa-long-arrow-left {
font-size:36px !important;
/*vertical-align:-19%;*/
color:green;
}
.fa-long-arrow-right {
font-size:48px !important;
color:green;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
<div class="col-md-12">
<span style="margin-left:20px;">
<input rows="4" cols="50" type="text" name="box" id="input-left"> </span>
<span class="middle-box">
<i class="fa fa-long-arrow-left"></i>
<span>
<input type="text" name="boxx" id="input-center">
</span>
<i class="fa fa-long-arrow-right"></i>
</span>
<span style="margin-right:20px;">
<input rows="4" cols="50" type="text" name="box" id="input-right">
</span>
</div>
</div>
I'm building a web page using Bootstrap that has a list box populated with names and a search box for filtering those names. The search box has a glyphicon-remove button that appears when typed in. When clicked, the button clears the search box. My problem is that the icon causes the size of the search box to shrink, and I can't figure out why that's happening.
Here's what it looks like:
Here's what it should look like:
I can fix the problem by giving it a set width using CSS, but I want it to resize with the window like the rest of the form.
HTML:
<div class="col-lg-4">
<form>
<div class="form-group has-feedback">
<label for="txtFilter">Select A User</label>
<div class="input-group">
<input class="form-control" type="text" id="txtFilter" placeholder="Filter by name">
<span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span>
</div>
</div>
<div class="form-group">
<select class="form-control" id="lstUsers" size="8"></select>
</div>
</form>
CSS:
.filter-icon{
cursor: pointer;
pointer-events: all;
z-index: 3;}
Whenever the icon disappears the box doesn't seem to change shape. Are you sure there isn't any other css you have that might be conflicting? Otherwise there doesn't seem to be another explanation since the code you provided doesn't produce the error.
.filter-icon{
cursor: pointer;
pointer-events: all;
z-index: 3;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-4">
<form>
<div class="form-group has-feedback">
<label for="txtFilter">Select A User</label>
<div class="input-group">
<input class="form-control" type="text" id="txtFilter" placeholder="Filter by name">
<span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span>
</div>
</div>
<div class="form-group">
<select class="form-control" id="lstUsers" size="8"></select>
</div>
</form>
</div>
</div>
</div>
You can try this Code
HTML
<html>
<head>
<title>SSSSSS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="col-lg-12">
<form>
<div class="col-lg-12 form-group has-feedback">
<label for="txtFilter">Select A User</label>
</div>
<div class="col-lg-12 form-group">
<input id="txtFilter" type="search" class="form-control" placeholder="Filter by name">
<span id="searchclear" class="glyphicon glyphicon-remove"></span>
</div>
<div class="col-lg-12 form-group">
<select class="form-control" id="lstUsers" size="8"></select>
</div>
</form>
</div>
</body>
</html>
CSS
#searchclear {
position: absolute;
right: 18px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
Jquery
$("#searchclear").click(function(){
$("#txtFilter").val('');
});
$(document).ready(function(){
$('#searchclear').css("display","none");
$('#txtFilter').keyup(function () {
$('#searchclear').css("display","block");
});
})
I was able to fix this by using a variation of Kasunjuth Bimal's code below. The key was I needed to change the 'input-group' class to 'form-group'. Then I was able to re-align the icon with some additional CSS. Here's my updated code:
<form>
<div class="form-group has-feedback">
<label for="txtFilter">Select A User</label>
<div class="form-group relative">
<input class="form-control" type="text" id="txtFilter" placeholder="Filter by name">
<span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span>
</div>
</div>
<div class="form-group">
<select class="form-control" id="lstUsers" size="8"></select>
</div>
.filter-icon{
position: absolute;
right: 1px;
cursor: pointer;
pointer-events: all;
z-index: 3;
}
.relative{
position: relative;
max-width: 280px;
}
I'm trying to align recaptcha box with input fields using bootstrap. I used this code on ckeditor. The position of recaptcha changed when the time out for captcha was display. How to keep the position of recaptcha box same even after display error?
.g-recaptcha {
margin-left: -1px!important;
margin-top: -50px
}
width: 300px; !important;
.captcha{
margin-left:7px;
margin-top:-47px!important;
}
.recaptcha-wrap {
position:relative;
height:76px;
padding:1px 0 0 1px;
background:#222;
>div{
position:absolute;
bottom: 2px;
right:2px;
font-size:10px;
color:#ccc;
}
}
width: 300px; !important;
.captcha{
margin-left:7px;
margin-top:-47px!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<form class="well form-horizontal" action=" " method="post"
id="contact">
<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group required"><span class="input-group-addon"><i class="glyphicon glyphicon-envelope" ></i> </span> <input class="form-control" id="email" name="email" placeholder="Email" type="text" value="" /></div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group required"><span class="input-group-addon"><i class="glyphicon glyphicon-user" ></i> </span> <input class="form-control" id="name" name="name" placeholder="Name" type="text" value="" /></div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group"> </div>
</div>
</div>
<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group captcha"><input data-error="Check `I am human` !" id="recaptchaValidator" name="recaptcha" pattern="1" required="" style="visibility: hidden" type="text" value="" />
<div class="g-recaptcha" data-callback="test" data-sitekey="6Lc7vh8UAAAAAEkcVjo-Cz5rOKSmE22V7x8-0MXP" name=""> </div>
</div>
</div>
</div>
</form>
I am attempting to create a css rule that will allow the fa-search icon to change color only when the input field is selected:
<div class="field-icon-prepend">
<span class="field-icon"><i class="fa fa-search"></i></span>
<input type="search" id="top-nav-search" name="s" placeholder="Search">
</div>
How would I create this rule?
What you're asking for is not quite possible, but this is close enough:
.fa-search{
float:left;
margin: 0 5px 0 0;
}
#top-nav-search:focus + .field-icon .fa-search{
color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="field-icon-prepend">
<input type="search" id="top-nav-search" name="s" placeholder="Search">
<span class="field-icon"><i class="fa fa-search"></i></span>
</div>
How can we add a Twitter Bootstrap icon icon-search to the right of a text input element?
The following attempt placed all the icons inside the input element, how can we crop it so it only displays the icon for icon-search?
Current Attempt
CSS
input.search-box {
width: 180px;
background: #333;
background-image: url('/img/glyphicons-halflings-white.png');
background-position: -48px 0;
padding-left: 30px;
margin-top: 45px;
border: 0;
float: right;
}
Updated Bootstrap 3.x
You can use the .input-group class like this:
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
Working Demo in jsFiddle for 3.x
Bootstrap 2.x
You can use the .input-append class like this:
<div class="input-append">
<input class="span2" type="text">
<button type="submit" class="btn">
<i class="icon-search"></i>
</button>
</div>
Working Demo in jsFiddle for 2.x
Both will look like this:
If you'd like the icon inside the input box, like this:
Then see my answer to Add a Bootstrap Glyphicon to Input Box
Bootstrap 5 with 3 different way.
Icon with default bootstrap Style
<div class="input-group">
<input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from">
<span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
</div>
Icon Inside Input with default bootstrap class
<div class="input-group">
<input type="text" class="form-control border-end-0" placeholder="From" aria-label="from" aria-describedby="from">
<span class="input-group-text bg-transparent"><i class="fas fa-map-marker-alt"></i></span>
</div>
Icon Inside Input with small custom css
<div class="input-group">
<input type="text" class="form-control rounded-end" placeholder="From" aria-label="from" aria-describedby="from">
<span class="icon-inside"><i class="fas fa-map-marker-alt"></i></span>
</div>
Custom Css
.icon-inside {
position: absolute;
right: 10px;
top: calc(50% - 12px);
pointer-events: none;
font-size: 16px;
font-size: 1.125rem;
color: #c4c3c3;
z-index:3;
}
.icon-inside {
position: absolute;
right: 10px;
top: calc(50% - 12px);
pointer-events: none;
font-size: 16px;
font-size: 1.125rem;
color: #c4c3c3;
z-index:3;
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div class="container">
<h5 class="mt-3">Icon <small>with default bootstrap Style</small><h5>
<div class="input-group">
<input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from">
<span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
</div>
<h5 class="mt-3">Icon Inside Input <small>with default bootstrap class</small><h5>
<div class="input-group">
<input type="text" class="form-control border-end-0" placeholder="From" aria-label="from" aria-describedby="from">
<span class="input-group-text bg-transparent"><i class="fas fa-map-marker-alt"></i></span>
</div>
<h5 class="mt-3">Icon Inside Input<small> with small custom css</small><h5>
<div class="input-group">
<input type="text" class="form-control rounded-end" placeholder="From" aria-label="from" aria-describedby="from">
<span class="icon-inside"><i class="fas fa-map-marker-alt"></i></span>
</div>
</div>
Bootstrap 4.x with 3 different way.
Icon with default bootstrap Style
<div class="input-group">
<input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
</div>
</div>
Icon Inside Input with default bootstrap class
<div class="input-group">
<input type="text" class="form-control border-right-0" placeholder="From" aria-label="from" aria-describedby="from">
<div class="input-group-append">
<span class="input-group-text bg-transparent"><i class="fas fa-map-marker-alt"></i></span>
</div>
</div>
Icon Inside Input with small custom css
<div class="input-group">
<input type="text" class="form-control rounded-right" placeholder="From" aria-label="from" aria-describedby="from">
<span class="icon-inside"><i class="fas fa-map-marker-alt"></i></span>
</div>
Custom Css
.icon-inside {
position: absolute;
right: 10px;
top: calc(50% - 12px);
pointer-events: none;
font-size: 16px;
font-size: 1.125rem;
color: #c4c3c3;
z-index:3;
}
.icon-inside {
position: absolute;
right: 10px;
top: calc(50% - 12px);
pointer-events: none;
font-size: 16px;
font-size: 1.125rem;
color: #c4c3c3;
z-index:3;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div class="container">
<h5 class="mt-3">Icon <small>with default bootstrap Style</small><h5>
<div class="input-group">
<input type="text" class="form-control" placeholder="From" aria-label="from" aria-describedby="from">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
</div>
</div>
<h5 class="mt-3">Icon Inside Input <small>with default bootstrap class</small><h5>
<div class="input-group">
<input type="text" class="form-control border-right-0" placeholder="From" aria-label="from" aria-describedby="from">
<div class="input-group-append">
<span class="input-group-text bg-transparent"><i class="fas fa-map-marker-alt"></i></span>
</div>
</div>
<h5 class="mt-3">Icon Inside Input<small> with small custom css</small><h5>
<div class="input-group">
<input type="text" class="form-control rounded-right" placeholder="From" aria-label="from" aria-describedby="from">
<span class="icon-inside"><i class="fas fa-map-marker-alt"></i></span>
</div>
</div>
Since the glyphicons image is a sprite, you really can't do that: fundamentally what you want is to limit the size of the background, but there's no way to specify how big the background is. Either you cut out the icon you want, size it down and use it, or use something like the input field prepend/append option (http://twitter.github.io/bootstrap/base-css.html#forms and then search for prepended inputs).
For bootstrap 4
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input class="form-control" type="search" placeholder="Search">
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-search"></i></div>
</div>
</div>
</form>
Demo
Bootstrap 4.x
With Bootstrap 4 (and Font Awesome), we still can use the input-group wrapper around our form-control element, and now we can use an input-group-append (or input-group-prepend) wrapper with an input-group-text to get the job done:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="my-search">
<div class="input-group-append">
<span class="input-group-text" id="my-search"><i class="fas fa-filter"></i></span>
</div>
</div>
It will look something like this (thanks to KyleMit for the screenshot):
Learn more by visiting the Input group documentation.
Bootstrap 5
According to Bootstrap 5 docs
.input-group-append and .input-group-prepend. You can now just add
buttons and .input-group-text as direct children of the input groups.
Example:
<div class="input-group">
<div class="input-group-text">File input</div>
<input class="form-control" id="formFile" type="file" />
<button class="btn border" type="button" style="background-color: #e9ecef;">
<i class="fas fa-times"></i>
</button>
</div>