角が丸いテキスト入力欄を作成

Pocket
LINEで送る

完成イメージ
角が丸いテキスト入力欄

記述サンプル(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; – フォーカスがある際に枠線を表示しません。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

この記事のトラックバック用URL