Simple Search Box Example HTML 5 ,CSS 3

Many Frinds Ask me about a think how to put button inside a textbox so thats we see on many site search box like that .. thats not actully a button inside textbox its a div which contain both button and textbox and we hide their actul color :
Here is a simple example :


<div class="wrapper">
    <input type="text" />
    <button>GO</button>
</div>
<h3>Simple search Box Example</h3>
<h2>Programming Seekerz</h2>


<style>
.wrapper {
    border:1px solid #000;
    display:inline-block;
    position:relative;

}

input,
button {
    background-color:transparent;
    border:0;
}

button {
    position:absolute;
    right:0;
    top:0;
}

input {
    padding-right:30px; /* button padding */
}
</style>


No comments

Powered by Blogger.