I made a search bar with a button that has an image as a background. I really can't get the button and the search bar to be the same height on all the browsers and devices.
My HMTL:
<form action="test.php">
<input type="search" placeholder="Indiquer un département...">
<input type="image" name="search" src="./img/loupe.png">
</form>
My CSS:
.search form input[type=search] {
position: relative;
left: 1.8em;
width: 65%;
padding: 0.87em;
margin-top: 3em;
background-color: #ffffff;
float: left;
-webkit-appearance: none
}
.search form input[type=search]:hover {
border: 1px #a1a1a1 solid;
}
.search form input[type="image"] {
height: 1.96em;
display: inline-block;
position: relative;
padding: 0.5em 20px;
left: 1.8em;
margin-top: 3em;
background-color: #4689f5;
color: #ffffff;
border: 1px #2f78eb solid;
cursor: pointer;
-webkit-appearance: none;
}
.search form input[type="image"]:hover {
background-color: #367ae8;
border: 1px #2d59b5 solid;
}
Thank you.
Try vertical-align: middle in your input[type="image"].
Related
I've been on checking on google still cant find solution for my problem.. whereby my form doesn't work input fields do not respon onfocus, also they don't show placeholders nor value. I'll appreciate if someone can show me the problem if it's my code themselves.
#searchForm {
display: block;
width: 100%;
float: left;
margin: 5px auto 0 auto;
border-top: 0.3px solid white;
}
#searchForm form {
display: block;
width: 100%;
height: auto;
padding: 5px 15px;
float: left;
color: black;
border: 2px solid red;
}
#searchForm form input[type=text] {
display: block;
width: 100%;
height: 35px;
border: 1px solid white;
text-align: center;
background-color: transparent;
}
#searchForm form input[type=submit] {
display: block;
margin: auto;
width: auto;
padding: 3px 5px;
font size: 16px;
color: black;
background-color: transparent;
}
<div id="searchForm">
<form action="header.php" method="POST">
<input type="text" name="que" placeholder="Enter your query and search.." required autofocus />
<input type="submit" name="search" value="Search" />
</form>
</div>
I've managed to get the search icon IN the input field, and can center the input field with margin: 0 auto and displaying it to block (but this keeps from the icon being in the field and keeps it at the right of the page, since it's on block - yet it's the only way I've managed to center it). New to HTML/CSS, so is there a proper way to do this? Looking to learn.
Currently have this code:
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
.search {
position: relative;
color: #aaa;
font-size: 16px;
}
.search input {
width: 500px;
height: 32px;
background: #fcfcfc;
border: 0;
border-bottom: 5px solid #000;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0 auto;
}
.search input {
text-indent: 32px;
}
.search .fa-search {
position: absolute;
top: 10px;
left: 10px;
}
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term" id="search" class="keyword">
</div>
The input is an inline element, consider centering the the wrapper which is a div (block element) on where you can use margin:auto. You may also use max-width to make it responsive on small screen:
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
.search {
position: relative;
color: #aaa;
font-size: 16px;
max-width: 500px;
width:100%;
margin:0 auto;
}
.search input {
width:100%;
height: 32px;
background: #fcfcfc;
border: 0;
border-bottom: 5px solid #000;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.search input {
text-indent: 32px;
}
.search .fa-search {
position: absolute;
top: 10px;
left: 10px;
}
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term" id="search" class="keyword">
</div>
How to make the zipcode field & CHECK button on oneline using CSS. My website page is responsive. I am providing you the css file of this section. I had tried but output is not coming which i want. I want the CHECK button to the right side of the textfield. I am attaching the screehshot. Any help will be appreciated. I had added the HTML & CSS code below for any queries.
#media only screen and (min-width: 300px) and (max-width: 767px) {
.z-btn button {
background: #000 none repeat scroll 0 0;
position: unset;
}
.z-btn input.product-custom-option {
border: 0 none;
float: right !important;
height: auto;
line-height: 31px;
margin-left: 7px;
width: 80%;
}
}
div.product-view .add-to-cart {
padding-bottom: 15px;
}
div.product-view .add-to-cart-buttons {
float: right;
margin-right: 0px;
max-width: 100%;
width: 82%;
}
.z-btn label {
background: rgba(0, 0, 0, 0) url("img/van-icon.png") no-repeat scroll right 2px top 3px / 96% auto;
float: left;
font-size: 13px;
height: auto;
line-height: 28px;
text-indent: -9999px;
width: 37px;
}
. .z-btn button {
background: #000 none repeat scroll 0 0;
float: right !important;
font-size: 13px;
padding: 6px 20px;
/*margin-top: -31px;*/
position: absolute;
}
.input-box > div#cod_msg {
display: inline-block;
float: left;
font-size: 22px;
text-align: center;
width: 100%;
}
.cod-suc,
.cod-error {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: #fff none repeat scroll 0 0;
border-color: -moz-use-text-color #ccc #ccc;
border-image: none;
border-style: none solid solid;
border-width: 0 1px 1px;
float: left;
margin-bottom: 10px;
padding: 2px 11px 3px;
position: relative;
text-align: center;
top: -3px;
width: 100%;
}
#cod_msg img {
display: inline-block;
float: none;
text-align: center;
width: 3%;
}
.cod-error {
color: #ff0000;
}
.cod-suc {
color: #009036;
}
div.product-view .add-to-cart-buttons button#zip-check.button {
line-height: 32px;
min-height: auto;
width: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<input placeholder="Enter your pincode" value="" name="cod" class="product-custom-option required-entry" id="cod" size="29" style="color:black; font-size:12px" type="text">
<button id="zip-check" class="button" type="button" onclick="checkCOD();" name="zip-check" title="Check">
Bootstrap button on the right
Using the code posted in the answer:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<input type="text" placeholder="enter your zip code"/>
<button type="button" class="btn btn-primary">Check</button>
I want to create something like the picture, where the #body is between #leg1 and #leg2, three of them should be horizontally in line to the bottom. Any idea how to achieve this? I tweaked some property such as display:inline, or float:left, float:right, but none of them work as I expect.
.comment_leg {
s width: 60px;
/*height:18px;*/
background-color: #ffcc99;
padding: 5px;
text-align: center;
border-radius: 3px;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
For Firefox
}
#body {
background-color: white;
/*position:relative;*/
border: 1px solid orange;
/*height:60px;*/
width: 500px;
padding: 10px;
color: black;
border-radius: 3px;
font-size: 18px;
/*border-color:yellow;*/
}
#body:focus {
outline-style: solid;
outline-color: orange;
outline-width: 0px;
}
<br>
<br>
<br>
<div class="comment_leg">leg1</div>
<div id="body" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Pika pi?"></div>
<div class="comment_leg">leg2</div>
From what I understood of your "凸" shape I guess this is what you want:
NOTE: You can adjust height and width depending on your preference.
.comment_leg {
width: 60px;
/*height:18px;*/
background-color: #ffcc99;
padding: 5px;
text-align: center;
border-radius: 3px;
vertical-align: bottom;
display: inline-block;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
For Firefox
}
#body {
background-color: white;
border: 1px solid orange;
min-height:100px;
width: 150px;
padding: 10px;
color: black;
border-radius: 3px;
font-size: 18px;
display: inline-block;
vertical-align: bottom;
}
#body:focus {
outline-style: solid;
outline-color: orange;
outline-width: 0px;
}
<div class="comment_leg">leg1</div>
<div id="body" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Pika pi?"></div>
<div class="comment_leg">leg2</div>
I wonder if i can put a submit button inside a search input, in the right side. I tried using float: right however doesn't work.
Codepen: http://codepen.io/celicoo/pen/XbKYyY
HTML:
<section class="search">
<div class="search__container">
<div class="search__row">
<div class="col-lg-12">
<div class="search__box">
<h2 class="search__title">Procurando por: Nome de ...</h2>
<form class="search__form" action="#" method="get">
<input class="search__input" type="text" placeholder="Busque um Crawler.." />
<button class="search__submit" type="submit">Procurar</button>
</form>
</div>
</div>
</div>
</div>
</section>
CSS:
.search {
color: #676a6c;
margin-top: 25px;
&__row {
margin-left: -15px;
margin-right: -15px;
overflow: hidden;
}
&__box {
background: #FFFFFF;
padding: 10px;
}
&__form {
margin-top: 10px;
}
&__input {
background-color: #FFFFFF;
background-image: none;
border: 1px solid #e5e6e7;
border-radius: 1px;
color: inherit;
display: block;
padding: 12px;
width: 100%;
font-size: 14px;
outline: none;
}
&__input:focus {
border: 1px solid #E97228;
}
&__submit {
background-color: #E97228;
border-color: #E97228;
color: #FFFFFF;
border: 1px solid transparent;
outline: none;
}
}
I was trying to use float right like i said, but isn't work, the float will only push the submit button to the right, but not inside the input.
Your input for .search__input has a width of 100% so nothing can actually go beside it.
You need to make the width less than 100% and add float:left;
Example:
.search__input{width:50%; float:left;}
I assume you are trying to have the submit button 'inside' the input... or overlapping it.
You need to create a wrapping div around the input and submit with position: relative;, and then give the submit button a position: absolute; and a top and right value.
I added display: inline & have placed your search bar inside a container.
Try this css:
.search {
color: #676a6c;
margin-top: 25px;
&__row {
margin-left: -15px;
margin-right: -15px;
overflow: hidden;
}
&__box {
background: #FFFFFF;
padding: 10px;
}
&__form {
margin-top: 10px;
}
&__input {
background-color: #FFFFFF;
background-image: none;
border: 1px solid #e5e6e7;
border-radius: 1px;
color: inherit;
display: block;
padding: 12px;
width: 50%;
font-size: 14px;
outline: none;
display: inline;
margin:0px;
}
&__input:focus {
border: 1px solid #E97228;
}
&__submit {
background-color: #E97228;
border-color: #E97228;
color: #FFFFFF;
border: 1px solid transparent;
outline: none;
padding: 12px;
margin:0px;
}
&__container {
width: 250px;
}
}