Question

我想改变搜索框的外观。在stackoverlow中，如您所见，搜索框正好是矩形。我希望有一个像elips（在边框处）的搜索框，而不是矩形。怎么做到呢？感谢

Answer 1

你可以这样做

.ClassNameOfYourSearch { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
}

根据需要更改px的数量。

示例：http://jsfiddle.net/jasongennaro/nynxE/

Answer 2

您可以在input元素上使用border-radius。

或者您可以使用type="search"，许多浏览器默认将其舍入。我仍然建议添加border-radius，因为浏览器的CSS的默认值是供应商特定的。

Answer 3

<!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>

您可以直接将其运行到记事本++或您使用的任何工具中。我没有包含他们用来添加灰色点击效果的JavaScript，但是这里有你可以乱用的边框半径。

Example Here

更改搜索框的外观

3 个答案: