iPentec.com / Document / カテゴリ: HTML / タグ: CSS テキストボックス

角の丸いテキストボックスを作成する

概要

CSSで角の丸いテキストボックスを表現する場合は、borderプロパティで角丸を設定します。

補足

古いWebブラウザで border-radius プロパティが利用できない場合は、テキストボックスの枠や背景を画像で表現する方法で角丸のテキストボックスを表現できます。画像で角丸テキストボックスを表現する方法についてはこちらの記事を参照してください。

コード

以下のCSS, HTMLファイルを作成します。

rounded-textbox.css

.RoundedCornerTextBox {
  padding: 0.4rem 0.4rem 0.4rem 0.4rem;
  border-radius:0.5rem;
  border:2px solid #606060;
}
  .RoundedCornerTextBox:focus {
    outline:none;
    border: 2px solid #3e83ff;
  }

.RoundedTextBox {
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  border-radius: 2.0rem;
  border: 2px solid #606060;
}
  .RoundedTextBox:focus {
    outline: none; 
    border: 2px solid #eb0082;
  }

rounded-textbox.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link href="rounded-textbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <form action="" method="post">
    <input class="RoundedCornerTextBox" id="inputBox" type="text" />
    <input class="RoundedTextBox" id="inputBox" type="text" />
  </form>
</body>
</html>

解説

CSSのborderを角丸にすることで、角丸のテキストボックスを表現します。CSSの角丸についてはこちらの記事を参照してください。
テキストボックスと枠線の間隔を広げないと、文字やキャレットが枠線に重なってしまう場合があるため、paddingプロパティで余白をとっています。

.RoundedCornerTextBox {
  padding: 0.4rem 0.4rem 0.4rem 0.4rem;
  border-radius:0.5rem;
  border:2px solid #606060;
}

フォーカスを受け取った場合、デフォルトのテキストボックスの設定ではoutlineでフォーカスの枠を表現しています。今回はoutlineの枠を非表示にし、borderの色を変更する動作にしています。

  .RoundedCornerTextBox:focus {
    outline:none;
    border: 2px solid #3e83ff;
  }

RoundedTextBox クラスは角丸の半径を大きくし、テキストボックスの左右が半円形になるデザインです。

.RoundedTextBox {
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  border-radius: 2.0rem;
  border: 2px solid #606060;
}
  .RoundedTextBox:focus {
    outline: none; 
    border: 2px solid #eb0082;
  }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
角の丸いテキストボックスを作成する:画像1

テキストボックスをクリックしフォーカスを与えると、枠線の色が変化します。
角の丸いテキストボックスを作成する:画像2

文字の入力も可能です。
角の丸いテキストボックスを作成する:画像3

フォーカスを失った場合の表示です。
角の丸いテキストボックスを作成する:画像4

右側の両端が半円形のテキストボックスも同様にフォーカスを受け取ると、枠線の色が変化します。
角の丸いテキストボックスを作成する:画像5

テキストの入力も可能です。角の半径が大きいため、paddingを多めに設定しないと文字が枠線と重なってしまう点に注意が必要です。
角の丸いテキストボックスを作成する:画像6

フォーカスを失った状態です。
角の丸いテキストボックスを作成する:画像7

補足:outlineプロパティで枠線を表現する場合

outlineプロパティでテキストボックスの枠線を表現する場合には、以下のコードを利用します。

コード

rounded-textbox-outline.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link href="rounded-textbox-outline.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <form action="" method="post">
    <input class="RoundedCornerTextBox" id="inputBox" type="text" />
    <input class="RoundedTextBox" id="inputBox" type="text" />
  </form>
</body>
</html>

rounded-textbox-outline.css

.RoundedCornerTextBox {
  padding: 0.4rem 0.4rem 0.4rem 0.4rem;
  border-radius:0.5rem;
  border:none;
  outline: 2px solid #C0C0C0;
}
  .RoundedCornerTextBox:focus {
    border: none;
    outline: 2px solid #9ec1ff;
  }

.RoundedTextBox {
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  border-radius: 2.0rem;
  border: none;
  outline: 2px solid #C0C0C0;
}
  .RoundedTextBox:focus {
    border: none;
    outline: 2px solid #ffd86c;
  }