My client wants search input which will look something like this:
The "Search..." is input text and loupe is submit button (that isn't problem to create). I was looking for some tutorial but I didn't found anything. Is possibility to create input which will look like this? If yes, can you explain me to how to create it or just refer me to some tutorial? Really thanks advance.
i created a cssdeck: http://cssdeck.com/labs/iicbd9ko
HTML:
<form>
<input type="text" name="search" placeholder="Search..." />
<button type="submit">[search icon]</button>
</form>
CSS:
::-webkit-input-placeholder {
color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
form {
margin: 50px;
padding: 5px;
background: green;
display: inline-block;
}
form input {
border: none;
background: transparent;
border-bottom: 1px solid #fff;
outline: none;
}
form button {
background: transparent;
border: 0;
color: #fff;
}
TJL
Assuming your input is:
<input id="search" type="text" />
Style it using css:
input#search {
border: none;
border-bottom: 1px solid gray;
}
<div class="search">
<input type="text" class="searchbox"></input>
<input type="image" class="searchbtn" src="img/search.jpg"></input>
</div>
.searchbox
{
outline:none;
width: 220px;
height: 30px;
font-size: 14px;
font-weight:700;
font-family: Arial;
border-bottom: 1px solid blue;
margin:0px;
float:left;
}
Hope this helps. outline:none will not draw the outline when the input is focussed.
