on my website, while hovering over the "Search" input or on focus, the glyphicon dissapears!
<div class="icon-addon addon-sm">
<input type="text" placeholder="Search (621 videos)" class="form-control" name="searchString" id="searchString">
<label for="searchString" class="glyphicon glyphicon-search" rel="tooltip" title="search"></label>
</div>
you have a problem here
.icon-addon .form-control:focus+.glyphicon, .icon-addon:hover .glyphicon, .icon-addon .form-control:focus+.fa, .icon-addon:hover .fa {
color: #fff;
}
remove .icon-addon:hover .glyphicon from above css or remove color or set difference color: #232323; Your choice.
Related
I have radio buttons which is something like this-
<div class="btn-group btn-group-toggle custom-btns" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" [value]="1"> Left (pre-checked)
</label>
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" [value]="middle"> Middle
</label>
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" [value]="false"> Right
</label>
</div>
Now if I'm trying to use the active or focus property on the btn-primary class, it's not working. The only thing I see is the default chrome outline when a button is selected. Here is the CSS I'm using-
.custom-btns{
.btn-primary:hover{
background-color: green;
color: black;
}
.btn-primary:focus, btn-primary:active{
color: #fff ;
background: blue;
border: none;
outline: none;
}
}
I want the label to turn green when I hover over it and blue when it is focused.
Can someone please let me know what I'm doing wrong here?
Thanks!
I have a series of buttons on a page and I want to target their hover functionality each individually, but if I try adding :hover to this it does not work.
Is there a way to get this to work?
input.chk-btn+label[for=recent-check] {
cursor: pointer;
background: red !important;
}
input.chk-btn+label[for=recent-check]:hover {
cursor: pointer;
background: red !important;
}
<input class="chk-btn" id="recent-check" type="checkbox">
<label class="btn btn-success text-uppercase m-b-xs sort-button" for="recent-check">Recent
<span class="glyphicon"></span>
</label>
input.chk-btn + label[for=recent-check]:hover {
cursor: pointer;
background: red !important;
}
<input class="chk-btn" id="recent-check" type="checkbox">
<label class="btn btn-success text-uppercase m-b-xs sort-button" for="recent-check">Recent
<span class="glyphicon"></span>
</label>
The above code works for me!
If your question is to ensure that the background changes colour on hover of the checkbox instead of the label you need to move the hover selector to after the checkbox selector not the label selector.
input.chk-btn:hover + label[for=recent-check] {
cursor: pointer;
background: red !important;
}
<input class="chk-btn" id="recent-check" type="checkbox">
<label class="btn btn-success text-uppercase m-b-xs sort-button" for="recent-check">Recent
<span class="glyphicon"></span>
</label>
I am trying to get a custom input style have a glyph icon inside and have a button on the right that says go.
Here is my js fiddle with it. jsfiddle
<div class="form-group">
<div class="icon-addon addon-sm">
<input type="text" placeholder="Search All Orders" class="form-control" id="Order Search">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>
The problem i am having is when i try to add the button on the right it makes the icon disappear when the input is clicked.
Using your fiddle I simply added an absolutely positioned button into your search box. Perhaps this is what you were looking for?
Added button in HTML:
<input type="text" placeholder="Search All Orders" class="form-control" id="Order Search">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
<button class="button-go">go</button>
Button's CSS:
.button-go {
position: absolute;
right: 0;
top: 0;
height: 30px;
}
https://jsfiddle.net/t6295xrd/
Here is a Demo for what i understood from you i just add the button to your fiddle and add this css to position it on right.
#Order_Search {
padding-right:20px;
}
.go-btn {
position: absolute;
right: 3px;
margin-left: -2.5px;
top: 2px
}
and this is the html
<div class="form-group">
<div class="icon-addon addon-sm">
<input type="text" placeholder="Search All Orders" class="form-control" id="Order_Search">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
<button class="go-btn"> Go </button>
</div>
Hello I'm having a hard time trying to put a glyphicon inside input tags, I've tried several codes from here and other sites but still can't get it..
this is what I have:
<div class="form-group">
<label for="cedula">Cedula:</label>
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-user"></i>
<input type="text" class="form-control" id="cedula" name="cedula" placeholder="Numero De Cedula" required="true" autofocus="true" maxlength="9">
</div>
</div>
and this is my css file:
/* enable absolute positioning */
.inner-addon {
position: relative;
}
/* style glyph */
.inner-addon .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
}
/* align glyph */
.left-addon .glyphicon { left: 0px;}
.right-addon .glyphicon { right: 0px;}
/* add padding */
.left-addon input { padding-left: 30px; }
.right-addon input { padding-right: 30px; }
BUT I keep getting this weird symbol outside the input:
and following the Bootstrap documentation I'm trying to implement the glyphicon inside the alert box:
if( $errores !== ""){
echo '<div class="alert alert-danger">';
echo '<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>';
echo $errores;
echo '</div>';
}
but again weird symbol appears:
Just use only this (no additional css needed):
<div class="form-group has-feedback">
<label class="control-label" >Cedula:</label>
<input type="text" class="form-control" id="cedula" name="cedula" placeholder="Numero De Cedula" required="true" autofocus="true" maxlength="9">
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
use this one:
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-user" ></i></span>
<input type="text" class="form-control" id="cedula" name="cedula" placeholder="Numero De Cedula" required="true" autofocus="true" maxlength="9">
</div>
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.
Here are three different ways to do it:
Here's a working Demo in Fiddle Of All Three
Validation:
You can use native bootstrap validation states (No Custom CSS!):
<div class="form-group has-feedback">
<label class="control-label" for="inputSuccess2">Name</label>
<input type="text" class="form-control" id="inputSuccess2"/>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
For a full discussion, see my answer to Add a Bootstrap Glyphicon to Input Box
Input Group:
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>
For a full discussion, see my answer to adding Twitter Bootstrap icon to Input box
Unstyled Input Group:
You can still use .input-group for positioning but just override the default styling to make the two elements appear separate.
Use a normal input group but add the class input-group-unstyled:
<div class="input-group input-group-unstyled">
<input type="text" class="form-control" />
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
Then change the styling with the following css:
.input-group.input-group-unstyled input.form-control {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.input-group-unstyled .input-group-addon {
border-radius: 4px;
border: 0px;
background-color: transparent;
}
Also, these solutions work for any input size
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
<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;
}
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>
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 {
padding: 5px 20px 5px 5px;
}
.search-box-container:after {
content: "\f002";
font-family: FontAwesome;
margin-left: -25px;
margin-right: 25px;
}
<!-- font awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search-box-container">
<input type="text" placeholder="Search..." />
</div>