1 How do I make the search box like this Sat Jan 08, 2011 4:25 am
Matti
Registered Member
How do I make the search box like this
My forum is here and i hope some one can help.
My forum is here and i hope some one can help.
RockerMan wrote:OMG, Just read the whole article, could not be more simple!
<div id="searchwrapper"><form action="">
<input type="text" class="searchbox" name="s" value="" />
<input type="image" src="THE_BLANK_SUBMIT_BUTTON_IMAGE" class="searchbox_submit" value="" />
</form>
</div>
#searchwrapper {
width:310px; /*follow your image's size*/
height:40px;/*follow your image's size*/
background-image:url(THE_SEARCH_BOX_IMAGE);
background-repeat:no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}
#searchwrapper form { display:inline ; }
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:9px;
width:256px;
height:28px;
}
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:265px;
width:32px;
height:28px;
}
input.search {
border: none;
-moz-border-radius: 10px;
}
input {
padding-left: 12px;
background: url(IMAGE URL HERE) no-repeat;
}
WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » How do I make the search box like this
Similar topics
Permissions in this forum:
You cannot reply to topics in this forum
|
|