レンちゃんとペンタ

フォーム要素のスタイリング用CSSまとめ

フォーム要素のスタイリング用CSSまとめ

チェックボックスやラジオボタンの色設定など、フォーム周りのCSSをご紹介。

この記事で分かること

  • プレースホルダーのテキストスタイルを変更する方法
  • フォーカス時の枠線の色を変更する方法
  • チェックボックスやラジオボタンの色を変更する方法

    Webデザインとブログで豊かに引きこもる。

    レンちゃんとペンタ

    Webデザインは器。ブログは中身。
    「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
    おウチで豊かに楽しく暮らす方法をご紹介しています。

    プレースホルダーの設定

    テキストフィールドなどで、ユーザーの入力を助けるために入っているテキストのことをプレースホルダーと言います。

    一行テキストフィールド

    テキストエリア

    「氏名をご記入ください」などがプレースホルダーです

    プレースホルダーに関するCSSを設定するためには、専用の擬似要素::placeholderを使います。

    サンプル
    以下は、プレースホルダーの色に薄いブルーグレー(#B0C4DE)を指定した例です。

    ::placeholder{
      color: #B0C4DE;
    }

    テ一行テキストフィールド

    テキストエリア

    プレースホルダーの色が変わりました

    フォーカス時の枠線の色設定

    続いて、各種テキスト入力欄を選択した時に現れる枠線。
    こちらも変更する事ができます。

    一行テキストフィールド

    テキストエリア

    選択した入力欄には枠線がつきます

    選択された要素は:focusという擬似クラスで定義できます。
    また枠線に関してはそれぞれ、以下のプロパティで設定することができます。

    ・線幅:outline-width
    ・線のスタイル:outline-style
    ・線の色:outline-color

    値の設定方法は、border系のプロパティ(border-width、border-style…)とほぼ同様です。
    またoutline系をまとめるショートハンドとして、outlineプロパティがあります。
    これもborderプロパティと似てますね。

    サンプル
    以下は、フォーカス時の枠線を2pxの実線(solid)、かつパープル(#C71585)に指定した例です。

    :focus{
      outline-width: 2px;
      outline-style: solid;
      outline-color: #C71585;
    
      /* outline: 2px solid #C71585; と同義 */
    }

    一行テキストフィールド

    テキストエリア

    選択時の枠線が変わりました

    チェックボックスやラジオボタンの色変更

    チェックボックス・ラジオボタンの色はaccent-colorプロパティで設定する事ができます。

    サンプル
    ここでは、色をパープル(#C71585)に変えてみます。
    :root擬似クラスに定義しておくと、ページ内のフォーム部品全てに共通の色を指定する事ができるので便利です。

    :root{
      accent-color: #C71585;
    }

    チェックボックス

    ラジオボタン

    Webページのデザインに合わせた色に変える事ができます

    プルダウン(セレクトボックス)やカレンダー(日付選択)は、現状では微妙です。
    プルダウンは、Safariでは矢印部分に色がつきますが、Chromeでは無反応。

    プルダウン

    プルダウン(select)にaccent-colorを設定しているのですが…
    select要素でaccent-colorプロパティを使った状態
    左がChrome、右がSafariです

    カレンダーも、色のカスタマイズができると楽しいのですが、現状ではまだ無理なようです。

    カレンダー

    カレンダーも色が変えられると楽しいですよね

    CSSの今後のアプデに期待です。

    1. Home
    2. フォーム要素のスタイリング用CSSまとめ

    Related Posts