Changing the look of search box
I want to change the look of search box. In stackoverlow, as you can see, the search box is exactly rectangular. I want to have a search bo开发者_开发百科x like elips( at the borders ), not rectangular. How can it be done? Thanks
You can do this
.ClassNameOfYourSearch {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Change the number for the px as necessary.
Example: http://jsfiddle.net/jasongennaro/nynxE/
<!DOCTYPE html>
<head>
<title>Sample Search Boxt</title>
<style>
#search {
border: 1px solid #CCC;
width: 100%; height: 25px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
}
input[type="text"] {
outline: none;
border: none;
}
</style>
</head>
<body>
<input type="text" id="search" />
</body>
</html>
You can run that directly into the notepad++ or whatever tool your using. I didn't include the JavaScript that their using to add that grey click affect, but this has the border radius that you can mess around with.
Example Here
You can use border-radius on the input element.
Or you could use type="search", which a lot of browsers are rounding by default. I'd still recommend adding border-radius too as the default of the browser's CSS are vendor specific.
加载中,请稍侯......
精彩评论