HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用68. 入力フォームで使うCSS

      2019/04/28   hatano

form関連の要素の特徴

form関連の要素はOSやブラウザによって初期値がかなり異なります。クリックアイコンやドラッグアイコンなどのパーツも異なります。そのためCSSで見た目を完全に同じにすることはできません。
ブラウザごとのform要素の違い この章では、ある程度見た目を統一できる箇所を解説していきます。input, textarea, select, buttonは初期値がdisplay: inline-block;のため、width, heightの指定が可能です。またinput, buttonは高さを変更してもテキストが常に上下中央になります。

input要素とtextarea要素のCSS

radio, checkbox, submit, reset以外のinput要素textarea要素では初期値に下記のプロパティなどが指定されており変更が可能です。

他にも下記のプロパティなどで見た目の変更が可能です。

下記はpadding, border, background-colorを調整したものです。


<input type="text" name="your-name" placeholder="名前を入力してください" class="textbox">


.textbox{
	width: 360px;
	padding: 5px 8px;
	border-radius: 6px;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
	border-right: 2px solid #aaa;
	border-bottom: 2px solid #aaa;
	background-image: none
	background-color: #ddd;
	font-size: 16px;
}

1行テキストボックスのサンプル

下記のアイコン部分はブラウザごとに見た目に違いがでます。CSSでの変更または統一はできません。textarea要素border-radiusの指定をするとドラッグアイコンが見えなくなる場合があります。

  • input type="radio"のクリックアイコン
  • input type="checkbox"のクリックアイコン
  • textarea要素の右下のドラッグアイコン

モバイルサイトでフォームを作成する場合はfont-sizeの値を16px以上で指定することをオススメします。iPhoneなどのiOSでは16px以下の場合、テキストボックスをタップするとズーム機能が働き、操作しづらくなる場合があります。16px以上の指定で、この機能はオフになります。

input要素(submit, reset)とbutton要素のCSS

input要素(submit, reset)とbutton要素では初期値に下記のプロパティなどが指定されていて変更が可能です。またボタン関連の要素はactive擬似クラスが設定されています。そのためボタンを押し込んだ時の見た目の変更も可能です。

他にも下記のプロパティなどで見た目の変更が可能です。

下記はactive擬似クラスでボタンを押し込んだ場合も含めて調整したものです。


<input type="submit" value="送信" class="btn-submit">


.btn-submit{
  width: 300px;
  height: 50px;
  padding: 5px 8px;
  border-radius: 10px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 4px solid #aaa;
  background-image: none;
  background-color: #666;
  font-size: 20px;
  color: #fff;
}
.btn-submit:active{
  border-bottom: none;
  background-color: #888;
}

送信ボタンのサンプル

appearanceプロパティ

CSS3のappearanceプロパティを使用することでform関連のタグの装飾をすべてなしにすることができます。ただしアイコンも非表示になるため、button要素などアイコンがないものに使用すると良いでしょう。このプロパティはベンダープレフィックスが必須になります。IEは非対応です。

appearanceの各ブラウザの対応状況
Can I use -CSS Appearance-


button{
	-webkit-appearance: none;
	-moz-appearance: none;
}

input要素(radio, checkbox)のCSS

radio, checkboxのボタンの形状やサイズをCSSで変更することはできません。marginpaddingでボタンの間隔の調整は可能です。

select要素、option要素のCSS

select要素は幅の変更のみ、すべてのブラウザ共通で可能です。その他のプロパティは変更してもブラウザによって無視される場合があります。option要素は基本的にCSSの変更はできないと考えてください。またクリックした後のリスト位置も調整ができません。

属性セレクタ

input要素はtype属性の値で種類が変わります。種類ごとにCSSの調整を行う場合はclass指定でもできますが「属性セレクタ」を利用すると属性や属性値で対象を絞り込むことができ便利です。「属性セレクタ」は様々なパターンがありますが今回は属性値で絞り込むセレクタを紹介します。属性値で絞り込む場合は、要素名[属性名="属性値"]で指定します。


/* type属性がtextの場合 */
input[type = "text"]{
	border: 1px solid #aaa;
}

まとめ

  • input要素、textarea要素はアイコンを除きCSSで調整しやすい。
  • input要素(radio, checkbox)は余白のみCSSで操作できる。
  • select要素、option要素はCSSでの調整がほとんどできない。
  • 属性セレクタを使うとinput要素は指定しやすい。