Tweet

Pocket

完成イメージ

記述サンプル(HTML)

<input type="text" value="" placeholder="Search this website..." name="keyword" id="keyword" />

記述サンプル(CSS)

input#keyword {
  border:none;
  border-radius:10px;
  box-shadow: none;
  padding: 2px 8px;
}

input#keyword:focus {
  outline: none;
}

2行目：border:none – テキストボックス標準の枠線を消します。
3行目：border-radius:10px; – 角を半径10pxの円で丸めます。
4行目：box-shadow: none; – テキストボックスの影を消します。
5行目：padding: 2px 8px; – 角を丸めたことにより内部の文字が重ならないよう余白を調整します。
9行目：outline: none; – フォーカスがある際に枠線を表示しません。

関連記事 :

CSSの基礎 「float:left」の利用 CSSの基礎 「margin、padding」の利用