I'm trying to get my the background color on my search glyph to take up the full box. Ideally, it should look like this.
However, it currently looks like this.
I'm not sure what's going on.
Here's my html (I'm using Bootstrap).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" placeholder="Search by user name, member types, genres..." />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
Edited to add my CSS:
#custom-search-input{
padding: 3px;
border: solid 1px #E4E4E4;
border-radius: 6px;
background-color: #fff;
height: 75%;
}
#custom-search-input input{
border: 0;
box-shadow: none;
}
.input-group-btn{
background: #E44424;
}
#custom-search-input button{
margin: 2px 0 0 0;
background: #E44424;
box-shadow: none;
border: 0;
color: black;
padding: 0 8px 0 10px;
border-left: solid 1px #ccc;
}
#custom-search-input button:hover{
border: 0;
box-shadow: none;
border-left: solid 1px #ccc;
}
#custom-search-input .glyphicon-search{
font-size: 23px;
}
You have padding in
#custom-search-input{
padding: 3px;
}
That's the reason.
You should instead have it on
.form-control{
padding: 3px;
}
if you need padding on input
Here's Plunker
Related
I tried to add a border to the input but the border doesn't display. I don't know what the problem could be. Does anyone see something that I don't?
HTML:
<div class="word">
<div class="search">
<span class="text">Search</span>
<input type="text" placeholder="Enter word to search">
<button><i class="fas fa-search"></i></button>
</div>
</div>
And CSS:
.word .search input{
position: absolute;
height: 42px;
width: calc(100% - 50px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6 !important;
outline: none;
border-radius: 5px 0 0 5px;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
just remove the opacity or make it 1
<div class="word">
<div class="search">
<span class="text">Search</span>
<input type="text" placeholder="Enter word to search">
<button><i class="fas fa-search"></i></button>
</div>
</div>
<style>
.word .search input{
position: absolute;
height: 42px;
width: calc(100% - 50px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6 !important;
outline: none;
border-radius: 5px 0 0 5px;
/*opacity: 0;*/
pointer-events: none;
transition: all 0.2s ease;
}
</style>
I am not sure I understand precisely what you are trying to do but as stated in previous answers if you set the opacity to 0 the entire input including the border will be transparent/not visible. The search bar doesn't seem to do much in the code you provided as the pointer-events: none; results in the search bar being impossible to select.
So if you want a search bar with a border but with a transparent background, and it being clickable I would suggest the following:
.word{
background: lightgrey;
}
.search input{
border: 2px solid #000;
border-radius: 5px 0 0 5px;
background: transparent;
}
<div class="word">
<div class="search">
<span class="text">Search</span>
<input type="text" placeholder="Enter word to search">
<button><i class="fas fa-search"></i>button</button>
</div>
</div>
I have two elements which I want to align this way on Top Bar :
Below you can see the HTML and CSS for the two of the elements:
I tried using margins or padding but it didn't look I was going anywhere like that.
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
width: 20%;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example {
margin: 3px auto;
max-width: 300px;
}
<div>
<div class="topnav">
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
<div style="float:right;">
<button type="button">+ New location</button>
</div>
</div>
Did you try using right?
First change float: left; in your two CSS classes (input field and button) to float: right;.
This way, the input field and the button are next to each other on the right side.
Then you can move your "right-floated" elements using:
right: 50px;, for isntance.
You could have use flex system layout to make it easier, but to do this in the way it is we should change couple of things:
Change order of div.example and the div that contains new location button in html
Set float: right to both div.example and the other div
Set margin-right: 50px to second div
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
width: 20%;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example {
/* NEW */
float: right;
/* Endof NEW */
margin: 3px auto;
max-width: 300px;
}
<div>
<div class="topnav">
<!-- Changed order -->
<div style="float:right;margin-right:50px;">
<button type="button">+ New location</button>
</div>
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
<!-- Endof change -->
</div>
I changed order of elements, add a little margin and float right to the first element.
<div>
<div class="topnav" style="margin-right: 100px;">
<div style="float:right;">
<button type="button">+ New location</button>
</div>
</div>
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button"><i class="fa fa-search"></i></button>
</div>
</div>
It's better to use flex and/or multi-column presentation, but with your current html-structure, one of the simplest options would be to add the second button to the "example" div and to use separated classes for buttons.
* {
box-sizing: border-box;
}
.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example button {
float: left;
padding: 5px;
background: #2196F3;
color: white;
font-size: 17px;
cursor: pointer;
border: 1px solid grey;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
}
.example .button--search {
border-left: none;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
width: 50px;
}
.example .button--new-location {
margin-left: 15px;
border-radius: 6px;
}
<div>
<div class="topnav">
<div class="example">
<input type="text" placeholder="Search.." name="search2">
<button type="button" class="button--search"><i class="fa fa-search"></i></button>
<button type="button" class="button--new-location">+ New location</button>
</div>
</div>
</div>
I´m trying to build a search element together with a button, something like:
Except that I need to change the background color of the search icon (blue, gray, whatever...).
Here is my code so far and the result:
.searchWrap {
position: absolute;
border: thin solid #f2f2f2;
border-radius: 5px;
top: 5px;
left: 5px;
}
.searchTerm {
float: left;
border-style: none;
padding: 5px;
height: 20px;
outline: none;
}
.searchButton {
right: -50px;
width: 30px;
height: 20px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
border-radius: 5px;
text-align: center;
color: #ccc;
vertical-align: middle;
cursor: pointer;
}
<div className="searchWrap">
<input type="text" className="searchTerm" placeholder="Search..." />
<button type="submit" className="searchButton">
<Icon name='search' />
</button>
</div>
I'm using React. Here is my result so far:
The external border is rounded, ok, that's what I need, but the separation between the searchTerm and the searchButton is also rounded, and I need a plain separator here, something like:
I'm using font awesome here, so the code isn't spaced like your screenshot, but looks like you have your own library you're using with react for that icon and your spacing is fine.
All you need to do is use border-radius: 0 5px 5px 0 to keep the left side borders from rounding, and assign a border-left on the .searchButton to draw the vertical line. I changed the border color so it's more prominent, but you can use whatever color you want.
*{margin:0;padding:0;}
.searchWrap {
position: absolute;
top: 5px;
left: 5px;
}
.searchTerm {
float: left;
border-style: none;
padding: 5px;
height: 20px;
outline: none;
margin-left: 3px;
border: thin solid #ddd;
border-width: thin 0 thin thin;
border-radius: 5px 0 0 5px;
}
.searchButton {
right: -50px;
width: 30px;
height: 32px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
border-radius: 0 5px 5px 0;
text-align: center;
color: #ccc;
vertical-align: middle;
cursor: pointer;
border: thin solid #ddd;
}
.searchTerm:focus, .searchTerm:focus + .searchButton {
border-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="searchWrap">
<input type="text" class="searchTerm" placeholder="Search..." />
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
Try this for the search button css instead of border-radius
.searchButton {
...
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
...
}
Can you use bootstrap? Relatively simple, and once you have it, modify the css the way you want it.
https://v4-alpha.getbootstrap.com/components/input-group/#button-addons
Bootstrap is strongly recommended for this. See http://getbootstrap.com/components/#input-groups. Coupled with FontAwesome, you could do something like this:
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="fa fa-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
I have a date input field, and a font awesome icon on top of it. The look is correct, but I can't click on the input when the mouse in on top of the icon. I've tried to fix this using z-index, but it's not working.
Here's what it looks like:
HTML
<div class="form-group inline-block Criteria__datePickerDiv">
<input type="text" name="dob" id="datepicker" placeholder="Birth Date" class="Criteria__datePicker" value=" {{ old($user->seekerProfile->dob->format('Y-m-d')) }}">
</div>
<span class="Criteria__calendar">
<i class="fa fa-calendar"></i>
</span>
CSS
.Criteria__datePicker {
border: none;
border-bottom: 3px solid $gray-light;
font-size: 20px;
text-shadow: 0 0 0 $gray-light;
color: transparent;
font-weight: 600;
width: 150px;
padding-right: 5px;
margin-left: 15px;
&:focus {
outline: none
}
}
.Criteria__datePicker:hover {
cursor: pointer;
}
.Criteria__datePicker:focus {
outline: none;
}
.Criteria__datePickerDiv {
z-index: 1;
}
.Criteria__calendar {
position: relative;
left: -15px;
font-size: 22px;
color: $brand_green;
z-index: 0;
}
Using the default Bootstrap styles, you can get close to what you're doing with an input group (example):
HTML:
<div class="buffer">
<div class="input-group">
<input class="form-control" aria-describedby="basic-addon2" type="text">
<span class="input-group-addon" id="basic-addon2">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
CSS:
.buffer
{
margin: 1em;
width: 200px;
}
.buffer .input-group input
{
border-right: none;
}
.buffer .input-group .input-group-addon
{
background: #fff;
border-left: none;
}
If you're going for a borderless style, you can get even closer:
.buffer
{
margin: 1em;
width: 200px;
}
.buffer .input-group
{
border: none;
}
.buffer .input-group input
{
border-right: none;
border: none;
border-bottom: solid 1px #d5d5d5;
box-shadow: none;
border-radius: 0;
}
.buffer .input-group .input-group-addon
{
background: #fff;
border: none;
border-bottom: solid 1px #d5d5d5;
border-radius: 0;
}
.buffer is simply a container/class I added to contain the input group - you can safely remove that.
how i can change button to have border-radius: 6px; and to by active marked when i will select it. Here is my HTML code and i also have CSS. When i make <button class:active i get only active button without css style
<div align="center">
<label>Period selection</label>
<button class="button: active" id="Day" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('1');">Day</button>
<button class="button: active" id="Week" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('2');">Week</button>
<button class="button: active" id="Month" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('3');">Month</button>
</div>
.ctButton,
.button,
body div.ui-dialog div.ui-dialog-buttonpane div.ui-dialog-buttonset button.ui-button,
.ui-dialog .ui-button,
a.button,
#ctPageContent a.button,
#ctPageContent a.button:hover {
background-color: #2B2B2B;
border: 0px;
display: inline-block;
padding: 3px 10px 4px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
margin: 4px 2px;
}
The : indicates a pseudo-class (pr pseudo-element). It is not part of the class name.
:active means "While being clicked on" (or otherwise activated).
If you want to match a class in the document, then give it a regular class name (and preferably not one that could be confused with a pseudo-class):
<button class="current"
Then use a class selector in the CSS:
.current { ... }
Add this to your css
.button:active{
border-radius: 6px;
}
In your html just add the below code.
NOTE- :active :hover should be in your css, not in your class attribute. Hence remove :active from your class attribute as below
<div align="center">
<label>
Period selection </label>
<button class="button" id="Day" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('1') ;">
Day</button>
<button class="button" id="Week" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('2') ;">
Week</button>
<button class="button" id="Month" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('3') ;">
Month</button>
</div>
change
class="button:active"
to
class="button"
and add to your css
button:active {
// your button:active styling
}
In CSS, colons have a special meaning: they introduce pseudo-classes.
Therefore, if you want to select the following HTML by its class...
<button class="button:active"></button>
...you must escape the colon:
.button\:active
.button\:active {
background-color: #2B2B2B;
border: 0px;
display: inline-block;
padding: 3px 10px 4px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
margin: 4px 2px;
}
<button class="button:active">Button</button>