テキスト入力欄の枠線や背景を自由に装飾する方法

textarea要素やinput要素を使ってウェブ上に掲載できるテキスト入力欄は、たいていのブラウザではただ細い枠線が引かれるだけの四角形として表示されます。ブラウザによっては、編集欄内に表示される文字サイズが小さめで見えにくい場合もあります。

これらのテキスト入力欄は、CSSを使えば枠線でも背景でも文字サイズでも簡単に装飾できます。なので、テキスト入力欄の枠線を角丸で太枠にしたTwitterのツイート欄っぽい感じにしたり、文字サイズをページの他のサイズと合わせたり、内側の余白をしっかり確保するなどの装飾を加えると、見やすくて使いやすい入力欄にできます。

そこで今回は、テキスト入力欄の枠線や余白量や文字サイズなどをCSSで調整して、見やすいテキスト入力欄を作る例をご紹介致します。

テキスト入力欄を作るHTMLソース

まずは、とりあえず今回のサンプルHTMLソースを示しておきます。textarea要素で複数行のテキスト入力欄を作っているだけの、特に複雑な点は何もない簡単なHTMLソースです。

※ここでは複数行を入力するtextarea要素だけを例に指定掲載していますが、後述するCSSの記述方法は、input要素を使った1行入力欄にもそのまま適用できます。

<p>
    ■適当なテキストエリア(複数行入力欄)：<br>
    <textarea class="textlines"></textarea>
</p>

上記のHTMLソースでは、後からCSSで装飾するために、textlinesというclass名を付加(3行目)しています。
これらは、何も装飾しなければ下記のように見えます。

具体的な見え方はブラウザによって異なりますが、たいていは四角いテキスト入力欄として表示されているでしょう。
編集領域内の文字サイズも小さめになっていることが多いように思います。

プレースホルダ付きのテキスト入力欄を作るHTMLソース

ちなみに、テキスト入力欄の中が空っぽだったときにだけ、うっすらと入力案内を表示する「プレースホルダ」を付けたテキスト入力欄を作ることもできます。昔からよくありましたが、HTML5では以下のようにplaceholder属性を使うだけで簡単に作れます。

<p>
    ■適当なテキストエリア(複数行入力欄)：<br>
    <textarea class="textlines" placeholder="いまどうしてる？"></textarea><br>
</p>

これらは、下記のように見えます。

次に、これらclassに対してCSSで装飾を追加しましょう。

テキスト入力欄の枠線や背景色を指定するCSSソース

次に、CSSソースを記述しましょう。

.textlines {
	border: 2px solid #0a0;  /* 枠線 */
	border-radius: 0.67em;   /* 角丸 */
	padding: 0.5em;          /* 内側の余白量 */
	background-color: snow;  /* 背景色 */
	width: 20em;             /* 横幅 */
	height: 120px;           /* 高さ */
	font-size: 1em;          /* 文字サイズ */
	line-height: 1.2;        /* 行の高さ */
}

上記のCSSソースのポイントをざっと解説しておきます。

• 2行目： まず、テキストエリアに枠線を加えています。太さ2pxで明るい緑色(#0a0)の実線(solid)です。
• 3行目： 次に、枠線の角を丸くしています。半径0.67文字分(＝0.67em)の大きさなので、ちょっとだけ丸くなる程度です。
• 4行目： 枠線を角丸にしたので、内側に多少の余白を設けないと、入力文字が角丸部分に重なってしまいます。そこで、0.5文字分の余白を加えています。
• 5行目： テキストエリアに背景色を加えています。ここではsnow色を指定していますので、ほぼ白色ですが。(^_^;) あんまり奇抜な色にはしない方が分かりやすいでしょうしね。^^;
• 6行目： テキストエリアの横幅を指定しています。もし横幅いっぱいに広げたい場合は、後述の方法を使って下さい。
• 7行目： テキストエリアの高さを指定しています。ここでは単位「px」を使っていますが、「em」など他の単位でも使えます。
• 8行目： テキストエリア内の文字は、標準ではたいてい小さめに表示されます。でも、小さいと見えづらいですから、普通の文字と同じサイズにしています。
• 9行目： テキストエリア内の行は、たいてい詰まって表示されます。でも、詰まっていると長文を書くときには見えづらいので、0.2文字分の行間を確保するため、行の高さを1.2にしています。

これを表示すると、以下のように見えます。

テキスト入力欄の横幅を最大にしたい場合のCSSソース

ちなみに、横幅を最大にしたい場合は、先ほどのCSSソースを以下のように修正します。(修正したのは6行目で、追加したのが7行目です。それ以外は先ほどのソースと同じです。)

.textlines {
	border: 2px solid #0a0;  /* 枠線 */
	border-radius: 0.67em;   /* 角丸 */
	padding: 0.5em;          /* 内側の余白量 */
	background-color: snow;  /* 背景色 */
	width: 100%;             /* 横幅いっぱいにする */
	box-sizing: border-box;  /* ※これがないと横にはみ出る */
	height: 120px;           /* 高さ */
	font-size: 1em;          /* 文字サイズ */
	line-height: 1.2;        /* 行の高さ */
}

横幅を最大にするには、単にwidthプロパティに値100%を指定すれば良いだけですが、ここでは内側の余白量を設定しているため、そのままだと横方向にはみ出てしまいます。それを防ぐには、box-sizingプロパティを使って「横幅」の定義をborder-boxに変更してやります。そうすると、横方向にはみ出すのを防げます。
なぜそうなるのか？については、以前All Aboutで記事にしましたので「横幅を100%にした際、親ボックスからはみ出すのを防ぐ」をご参照下さい。(^_^;)

表示例は以下の通りです。

テキスト入力欄にカーソルが入った場合の枠線や背景色を指定するCSSソース

テキスト入力欄の中にカーソルが入っているときにだけ、「そのテキスト入力欄が編集可能状態にある」と示す目的で、枠線や背景色を変化させると分かりやすくなるでしょう。
そうするには、以下のCSSソースを追加します。
セレクタには、:hoverではなく、:focus疑似クラスを使っている点がポイントです。

.textlines:focus {
	border-color: skyblue;   /* 枠線の色 */
	background-color: #ffc;  /* 背景色 */
	outline: none;           /* ※ブラウザが標準で付加する線を消したいとき */
}

上記のように、:focus疑似クラスを使うと、「その要素にフォーカスがある場合」に限定して装飾を変化させられます。フォーカスがあるというのは、テキスト入力欄の場合は「カーソルが入っている状態」を指します。

※なお、ChromeやOperaなど一部のブラウザでは、フォーカスのある入力欄に独自の枠線を加えます。そのままだと枠線が二重に見えてしまいます。なぜなら、これらのブラウザが追加する枠線は borderプロパティで描かれる枠線ではなく、outlineプロパティで描かれる枠線だからです。そこでoutline: none;も同時に指定しておくことで、ブラウザ側独自の枠線の付加を阻止できます。詳しくは記事「テキスト入力欄のフォーカス時にChromeなどが自動付加する枠線を消す方法」で紹介していますのでどうぞ。

※また、outlineプロパティで引く枠線の特長や方法については、別途「borderと違ってレイアウトに影響しない枠線が引けるoutlineプロパティ」で紹介していますので、ご参考にどうぞ。

表示例は以下の通りです。入力欄の中にカーソルを入れてみて下さい。すると、枠線と背景色が変化します。入力欄外をクリックするなどしてカーソルを消せば、元の配色に戻ります。

以上、テキスト入力欄の枠線や背景を自由に装飾する方法でした。
ぜひ、試してみて下さい。

(更新日：2018年02月04日)