HTML フォームへの高度なスタイル設定

本記事では、HTML フォームでカスタマイズが難しい一部のウィジェットで CSS を使用する方法を見ていきます。前の記事で見たように、テキストフィールドやボタンでの CSS 使用はまったく問題がありません。ここからは、HTML フォームへのスタイル設定の闇の部分を見ていきます。

始める前に、2 種類の HTML フォームウィジェットについておさらいしましょう:

不良
スタイルの設定が難しく複雑なトリックが必要であり、時に CSS3 の高度な知識が必要である要素。
劣悪
これらの要素では、CSS によるスタイル設定はあきらめましょう。あなたが可能なことはせいぜいわずかなものですが、それを各ブラウザに対してあてにすることはできません。また、それら要素の見た目を完全にコントロールすることもできません。

CSS の表現力

テキストフィールドやボタン以外のフォームウィジェットに存在する大きな問題は多くの場合、CSS には複雑なウィジェットへ適切にスタイルを設定できるほど十分な表現力がないことです。

最近の HTML および CSS の進化により、CSS の表現力が拡張されてきました:

これは良いスタートですが、日付ピッカーなどの複雑なウィジェットをスタイルするには不十分です。

フォームの CSS の表現力を拡張するブラウザベンダーによる実験的な機能がいくつかあり、利用可能なものを知ることは良いことです。

警告: これらの実験は興味深いものの、非標準です。それらを使用する場合 (そしてできればするべきではないですが)、自己責任で行ってください。

フォーム要素の外見を制御する

WebKit (Chrome、Safari、Opera) および Gecko (Firefox) ブラウザは、-webkit-appearance または -moz-appearance という独自のプロパティを持っています。このプロパティの値のほとんどは標準ではないため、使用しないでください。実際には、WebKit と Gecko の動作が異なっています。しかしながら、知っておくとよい値が1つあります: none です。この値によって、与えられたウィジェットのスタイルを (ほぼ完全に) コントロールできます。

だから要素にスタイルを適用するのに問題がある場合は、そのプロパティを試してみてください。これからいくつか例を見ていきますが、よく知られている使い方は、WebKit ブラウザのスタイリング検索フィールドです。

<form>
    <input type="search">
</form>
input[type=search] {
    border: 1px dotted #999;
    border-radius: 0;
    -webkit-appearance: none;
}

注意: Web 技術について語る際に将来を予測するのは困難です。CSS の表現力を拡張するのは難しく、また将来の展望を示す Shadow DOM のような他の仕様の調査が行われています。十分なスタイル設定を可能にするための探求はまだ終わりません。

チェックボックスとラジオボタン

チェックボックスやラジオボタンのスタイリングは難しい場合があります。たとえば、チェックボックスやラジオボタンのサイズはデフォルトのデザインの変更が意図されておらず、ブラウザで試してみると非常に異なる反応を示します。

シンプルなテストケース

<span><input type="checkbox"></span>
span {
    display: inline-block;
    background: red;
}

input[type=checkbox] {
    width : 100px;
    height: 100px;
}

さまざまなブラウザでの処理方法は以下のとおりです:

ブラウザ レンダリング
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
Internet Explorer 11 (Windows 10)
Edge 16 (Windows 10)

より複雑な例

Internet Explorer には -webkit-appearance-moz-appearance のようなプロパティはないかもしれませんが、チェックボックスをカスタマイズする方法はあります! この HTML の例を見てみましょう:

<form>
  <fieldset>
    <legend>Fruit preferences</legend>

    <p>
      <label>
        <input type="checkbox" name="fruit-1" value="cherry">
        I like cherry
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" name="fruit-2" value="banana" disabled>
        I can't like banana
      </label>
    </p>
    <p>
      <label>
        <input type="checkbox" name="fruit-3" value="strawberry">
        I like strawberry
      </label>
    </p>
  </fieldset>
</form>

さて、カスタムチェックボックスデザインでこれらのスタイルを設定しましょう。

計画では、ネイティブのチェックボックスを独自のデザインに置き換えることです。元のチェックボックスを解除することから始めましょう:

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type=checkbox]::-ms-check {
  display: none;
}

:checked:disabled 擬似クラスを使用して、状態の変化に合わせてカスタムチェックボックスの外観を変更します:

input[type=checkbox] {
  position: relative;
  width: 1em;
  height: 1em;
  border: 1px solid gray;
  /* Adjusts the position of the checkboxes on the text baseline */ 
  vertical-align: -2px;
  /* Set here so that Windows' High-Contrast Mode can override */
  color: green;
}

input[type=checkbox]::before {
  content: "✔";
  position: absolute;
  font-size: 1.2em;
  right: 0;
  top: -0.3em;
  visibility: hidden;
}

input[type=checkbox]:checked::before {
  /* Use `visibility` instead of `display` to avoid recalculating layout */
  visibility: visible;
}

input[type=checkbox]:disabled {
  border-color: black;
  background: #ddd;
  color: gray;
}

実際の結果が表示されます。

appearance:-ms-check をサポートしていないブラウザでこれらのチェックボックスを表示しても、問題はありません - チェックボックスのように見えます!

この手法は、-ms-check という名前にもかかわらず、ラジオボタンでも機能します。

select の悪夢に対処する

<select> 要素は、プラットフォーム間で一貫してスタイルを設定することは不可能とみなされます。しかし、いくつかのスタイルは実行可能です。例を見てみましょう:

<select>
  <option>Cherry</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
select {
  width   : 80px;
  padding : 10px;
}

option {
  padding : 5px;
  color   : red;
}

次の表は、異なるブラウザがどのようにこれを処理するかを示しています。最初の2つの列に上記の CSS が表示されます。2番目の2つの列では、この追加 CSS を使用して外観をより詳細に制御します。

select, option {
  -webkit-appearance: none; /* WebKit/Chromium */
  -moz-appearance: none; /* Gecko */
}

/* Internet Explorer 10–11 and Edge */
select::-ms-expand {
  display: none;
}
ブラウザ OS 通常のレンダリング 調整したレンダリング
閉じた状態 開いた状態 閉じた状態 開いた状態
Firefox 57 macOS
Windows 10
Chrome 63 macOS
Windows 10
Opera 49 macOS
IE11 Windows 10
Edge 16 Windows 10

ご覧のように正規化プロパティの助けを借りても、問題はまだ残っています:

  • <option> 要素の開いている状態のメニューは、OS 間で一貫していない特定のスタイルのみを受け入れます
  • padding プロパティは、OS とブラウザ間で矛盾しています
  • Internet Explorer バージョン 9 以下では、多くのスタイリングが許可されていません

CSS はこれらのウィジェットの外観を一貫して見直すのには適していないかもしれませんが、ブラウザと OS の違いがあっても実行することを望む限り、一部を調整することが可能です。

次の記事「Form ウィジェットのプロパティ互換表」は、どのプロパティが適切かを理解するのに役立ちます。

よりよいフォームへの道: 役に立つライブラリとポリフィル

CSS はチェックボックスやラジオボタンのために十分に表現されていますが、より高度なウィジェットでは十分ではありません。

  • 時間関連入力ピッカー。例えば <input type="date"><input type="datetime-local"><input type="week"> など
  • <input type="color"> のカラーピッカー

フォームウィジェットを完全にコントロールしたい場合は、JavaScript に頼るしかありません。カスタムフォームウィジェットをビルドする方法の記事では、独自のフォームウィジェットを作成する方法を見ていきますが、そこには役に立つ便利なライブラリがいくつかあります。

  • Uni-form はフォームマークアップを標準化し、CSS でスタイリングするフレームワークです。jQuery で使用すると、いくつかの追加機能も提供されますが、これはオプションです
  • Formalize は、フォームの正規化とカスタマイズを支援する共通の JavaScript フレームワーク (jQuery、Dojo、YUIなど) の拡張です
  • Niceforms はスタンドアロンの JavaScript メソッドで、Web フォームを完全にカスタマイズできます。あなたは、組み込みのテーマのいくつかを使用することも、独自のテーマを作成することもできます

次のライブラリはフォームだけではありませんが、HTML フォームを処理するための非常に興味深い機能を備えています:

  • jQuery UI には日付ピッカーなどのカスタマイズ可能なウィジェットが用意されています (アクセシビリティに特に注意してください)
  • Twitter Bootstrap はフォームを正規化するのに役立ちます
  • WebShim は、ブラウザの HTML5 サポートに対処するのに役立つ巨大なツールです。Web フォームの部分は本当に役に立ちます

CSS と JavaScript には副作用があることに注意してください。したがって、それらのライブラリのいずれかを使用することを選択した場合は、スクリプトが失敗した場合に備えて、堅牢なフォールバック HTML を用意する必要があります。スクリプトが失敗する理由はたくさんあります。特にモバイル環境では、これらのケースを可能な限り最善に処理するように Web サイトやアプリケーションを設計する必要があります。

まとめ

HTML フォームで CSS を使用するのはまだ困難ですが、しばしばそれらを回避する方法があります。クリーンでユニバーサルな解決方法はありませんが、最新のブラウザでは新しい可能性があります。今のところ、最良の解決策は、HTML フォームウィジェットに適用されたときに異なるブラウザが CSS をサポートする方法の詳細を学ぶことです。

このガイドの次の記事では、さまざまな HTML フォームウィジェットが最も重要な CSS プロパティをどの程度うまくサポートしているかを調べます: フォームウィジェットのプロパティ互換テーブル

あわせて参照

このモジュールの中身

  1. 初めての HTML フォーム
  2. HTML フォームの構築方法
  3. ネイティブフォームウィジェット
  4. フォームデータの送信
  5. フォームデータの検証
  6. カスタムウィジェットの作成方法
  7. JavaScript によるフォームの送信
  8. 古いブラウザでの HTML フォーム
  9. HTML フォームへのスタイル設定
  10. HTML フォームへの高度なスタイル設定
  11. フォームウィジェット向けプロパティ実装状況一覧

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto, coeurl, chrisdavidmills, yyss
最終更新者: silverskyvicto,