[CSS]フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシート -select-css

フォームをスタイルのが苦手という人も少なくないと思います。中でもselect要素はブラウザのデフォルトが非常に使いにくく、スタイルするのに知識が必要です。

フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシートを紹介します。

select-css -GitHub

• select-cssの特徴
• select-cssのデモ
• select-cssの使い方

select-cssの特徴

select-cssは、デスクトップ・スマホの各ブラウザで一貫して美しく見せるスタイルシートを適用します。IE 9以前など、一部のブラウザでは、アイコンのデザインはサポートされていませんが、コントロール可能で通常の目的には十分に適しています。

select-cssで実装したselect要素の各ブラウザでの表示

select-cssのデモ

デモページでは、select-cssを適用したselect要素を実際のブラウザで試せます。

デモページ

select-cssの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

Step 2: HTML

select要素に「.select-css」を加えるだけで、完了です。

select-css.cssの中身

select-css.cssの中身は、下記の通り。

select-css.cssの解説

CSSはそのまま使用しても問題ありませんが、それを編集するのであれば、正しく見えるようにするためのいくつかのプロパティと値を知っておくとよいでしょう。

• select要素はデフォルトで「display: block;」に設定されていますが、ラベルと一緒に並べる時は「display: inline-block; width: auto;」に変更してください。
• select要素の背景は2つの背景画像で実装されています。1つ目はSVGアイコン（データURIとしてインライン）、2つ目は線形グラデーションです。これらは、外部画像にすることもできます。
  アイコン画像を変更する場合は、そのサイズが「background-size: .65em auto, 100%;」で定義されていることに注意してください。位置は「background-position: right .7em top 50%, 0 0;」で定義されています。
  サイズを変更した場合は、select要素のテキストと重ならないように右寄せにすることを勧めます。ただし、IE9以前では矢印は表示されないため、ブラウザの矢印も表示されません。デフォルトの矢印はpaddingの左に表示されるため、大きな値にしないでください。IE9以前で矢印が離されてしまいます。
• 線形グラデーションの背景は、そのままにしておくことが重要です。なぜなら、背景の存在はIE9以前でbackgroundプロパティを認識するのを妨げ、その結果としてネイティブのものと一緒にカスタムアイコンを表示しないからです。
• appearanceプロパティは、select要素のデフォルトのスタイルを取り除くために重要です。
• 「font-size: 16px;」は、iOSのSafariでズームインでレイアウトを拡大するので、重要です。一般的に、この振る舞いは厄介なため、selectに16pxを定義して避けます。
• .select-css optionは、option要素がselectボタンの太字フォントを継承しないようにします。
• Styled Single Selectsにあるように、select要素に背景色を定義します。ここで使用したように背景画像ではありませんが、option要素が背景色も継承するため、問題が発生する可能性があります。そのため、それを避けてください。
• .select-css::-ms-expandはIE11とIE10にメニューアイコンの疑似要素を隠すように指示するので、その後にカスタムアイコンを表示できます。
  このアイデアをくれたJelmer de Maatに感謝します。