検索ボックスの外観を変更する

検索ボックスの外観を変更したいと思います。 stackoverlowでは、表示されるように、検索ボックスは正確に長方形です。私は長方形ではなく、エリップのような検索ボックスを（国境に）持ちたいと思っています。どうすればできますか？ありがとう検索ボックスの外観を変更する

出典

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

検索ボックスの外観を変更する

答えて

関連する問題