最新のCSS機能を備えたカスタムスタイリングフォーム入力

現在、セマンティクスとアクセシビリティを維持しながら、カスタムチェックボックス、ラジオボタン、トグルスイッチの構築は完全に実行可能です。 JavaScriptコードや追加のHTML要素の行も必要ありません！実際、最近よりも過去よりも簡単です。見てみましょう。

最終的な効果は次のとおりです。

以前よりもはるかに簡単です！

その理由は、最終的にできるからです<input>::before ::afterスタイルが付けられています。これは、私たちが保持して設定できることを意味します<input>余分な要素のないスタイル。以前は、余分に頼らなければなりませんでした<div>または<code><span></span>カスタムデザインを実装します。

HTMLコードを見てみましょう

ここには特別なことはありません。このHTMLコードを使用して、入力をスタイリングする必要があります。

<input type="checkbox" id="c1">
<input type="radio" id="r1">
<input type="checkbox" id="s1">

これはすべてHTMLパーツに関するものです。もちろん、 nameとid属性を追加することをお勧めします。<label></label>要素：

<label for="c1">チェックボックス</label>
<input type="checkbox" id="c1">

<label for="r1">ラジオボタン</label>
<input type="radio" id="r1">

<label for="s1">スイッチ</label>
<input type="checkbox" id="s1" class="switch">

スタイルの設定を開始します

まず、 appearance: none;そのプレフィックスバージョンを含みます。 appearance属性は、ブラウザのデフォルトスタイルを要素から削除するように設計されているため重要です。ブラウザがこのプロパティをサポートしていない場合、スタイルは適用されず、デフォルトの入力スタイルが表示されます。これは絶対に問題あり、漸進的な強化の良い例でもあります。

 @supports（-webkit-appearance：none）または（-moz-appearance：none）{
  入力[type = 'チェックボックス']、
  input [type = 'Radio'] {
    -webkit-acpearance：none;
    -moz-acpearance：none;
  }
}

今のところ、 appearanceまだ作業ドラフトフェーズにありますが、ここにサポートがあります。

このブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番号は、このバージョンでブラウザがこの機能をサポートしていることを示しています。

デスクトップ

モバイル/タブレット

リンクと同様に、フォーム要素のさまざまな相互作用状態を考慮する必要があります。要素スタイルを設定するときに、これらの状態を考慮します。

• :checked
• :hover
• :focus
• :disabled

たとえば、トグル入力のスタイル、ノブを作成し、 :checked方法を次に示します。

 /*コンテナを切り替える*/
.switch {
  幅：38px;
  ボーダーラジウス：11px;
}

/*ノブを切り替える*/
.switch ::後{
  左：2px;
  トップ：2px;
  ボーダーラジウス：50％;
  幅：15px;
  高さ：15px;
  背景：var（ -  ab、var（ -  border））;
  変換：translatex（var（ -  x、0））;
}

/*選択したときに色と位置を変更します*/
.switch：checked {
  -ab：var（ - アクティブイン）;
  -X：17px;
}

/*入力が無効になっているときにトグルノブの不透明度を減らす*/
.switch：disabled：not（：checked）::後{
  不透明：.6;
}

私達はします<input>要素はコンテナとして使用されます。入力内のノブは::after作成されます。繰り返しますが、追加のマーキングは必要ありません！

デモでスタイルを開くと、CSSカスタムプロパティを定義していることがわかります。これは、スタイルシートで再利用可能な値を管理する素晴らしい方法になっているためです。

 @supports（-webkit-appearance：none）または（-moz-appearance：none）{
  入力[type = 'チェックボックス']、
  input [type = 'Radio'] {
    -active：＃275efe;
    -active-inner：#fff;
     - フォーカス：2px RGBA（39、94、254、.25）;
     - ボーダー：＃BBC1E1;
     - ボーダーホバー：＃275efe;
     - バックグラウンド：#fff;
     - 障害者：＃f6f8ff;
    -disabled-inner：＃e1e6f9;
  }
}

しかし、カスタムプロパティを使用する別の理由があります - それらは、要素の状態に基づいて値を更新するのに非常に適しています！ここでは詳細は説明しませんが、以下はさまざまな状態に基づいてカスタムプロパティを使用する方法の例です。

 /*デフォルト値*/
入力[type = 'チェックボックス']、
input [type = 'Radio'] {
  -active：＃275efe;
   - ボーダー：＃BBC1E1;
  境界線：1PX SOLID VAR（-BC、var（ -  border））;
}

/*デフォルト値を書き換える*/
入力[type = 'チェックボックス']：チェックされた、
input [type = 'radio']：checked {
  -B：var（ - アクティブ）;
  -BC：var（ - アクティブ）;
}

/*選択されていない場合、無効になっていない場合、ホバリングするときに別の境界色の色が適用されます*/
input [type = 'チェックボックス']：not（：checked）：not（：disabled）：hover、
input [type = 'radio']：not（：checked）：not（：disabled）：hover {
  -BC：var（ -  border-hover）;
}

アクセシビリティのために、カスタムフォーカススタイルを追加する必要があります。デフォルトのアウトラインを削除しました。これは、設定した残りのスタイルのように丸くすることができないためです。ただし、丸い角を備えたbox-shadowアウトラインのように機能する丸い角のスタイルを作成できます。

入力[type = 'チェックボックス']、
input [type = 'Radio'] {
   - フォーカス：2px RGBA（39、94、254、.25）;
  アウトライン：なし;
  遷移：Box-Shadow .2s;
}

入力[type = 'チェックボックス']：フォーカス、
input [type = 'Radio']：Focus {
  Box-Shadow：0 0 0 var（ - フォーカス）;
}

また、HTMLでフォローするように直接整列して設定することもできます<input>エレメンタル<label></label>要素スタイル：

<label for="c1">チェックボックス</label>
<input type="checkbox" id="c1">

入力[type = 'チェックボックス']ラベル、
入力[type = 'Radio']ラベル{
  ディスプレイ：インラインブロック。
  垂直アライイン：トップ;
  /*その他のスタイル*/
}

入力[type = 'チェックボックス']：無効ラベル、
input [type = 'Radio']：無効ラベル{
  カーソル：禁止されていません。
}

デモをもう一度見せてください：

最近、カスタムフォームスタイルを作成するのがどれほど便利かを理解できることを願っています。フォーム入力で直接擬似要素のために必要なマークアップが少なくなります。カスタムプロパティにより、スタイルスイッチが少なくなります。 @supportsのおかげで、かなり優れたブラウザのサポートがあります。

全体として、これは私たちが過去に対処しなければならなかった開発体験よりもはるかに優れています！