改變我想改變搜索框的外觀搜索框

的外觀。在stackoverlow中，如您所見，搜索框完全是矩形。我想要有一個像elips（在邊框）而不是矩形的搜索框。怎麼辦？謝謝改變我想改變搜索框的外觀搜索框

2011-08-17 user893970

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

來源

2011-08-17 02:25:29

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

或者你可以使用type="search"，裏面很多瀏覽器的默認舍入。我仍然建議添加border-radius，因爲瀏覽器CSS的默認值是供應商特定的。

來源

2011-08-17 02:13:17 alex

你可以做到這一點

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

更改包括必要時px數量。

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

來源

2011-08-17 02:15:42

改變我想改變搜索框的外觀搜索框

回答

相關問題