Styling search bar and go button with no gap
Is there a way so that the search bar and go button are completely touching? I am trying to create something whereby the search bar and go button are kind of one.
Here is my code:
/*SEARCH*/
form#searchform input{background-color:rgba(128, 129, 132, 0.4); margin-bottom: 10px; border:medium none; font-size:12px; padding:10px; width:173px;}
form#searchform input#s{
width: 150px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color: #868686;
border-bottom: 1px #868686 solid;
padding:10px;
}
form#searchform input#btn
{width: 23px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color:#00ADEE;}
<!-- START SEARCH -->
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
开发者_如何转开发<div>
<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" name="s" id="s" />
<input name="go" type="submit" value=">" id="btn" />
</div>
</form>
<!-- END SEARCH -->
At the moment there is a small gap between the two and I cannot figure out why. I also want to pad the border-bottom on the search box and the padding for the #s class is not working either. Any help is appreciated!
Your problem is that you have whitespace between your text field and your button, the following fixes the issue.
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div>
<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" name="s" id="s" /><input name="go" type="submit" value=">" id="btn" />
</div>
</form>
Edit: Like this http://jsfiddle.net/N2PVu/
Edit 2: OR form#searchform input#s, form#searchform input#btn{float:left;}
Try use this:
form#searchform input#s{ float:left }
精彩评论