もう一度、入力タイプのチェックボックスとラジオの視覚化について。方法を忘れた方へ

トピックは古く、すでに、結局のところ、忘れられています。



最近、私は、既存のプロジェクトの近代化のための技術仕様の開発について短い仕事をしました。そして、特に、この事件は悪名高い<input type = "checkbox">のスタイリングに関するものでした。「あらゆる業界の」プログラマーであるパフォーマーは、私がそれを行う方法を言葉で彼に説明していることさえ理解していなかったことが判明しました。例を挙げなければならなかった結果、このテキストが表示されました。



チェックボックスとラジオボックスは、サイトごとに異なって描かれていることを思い出してください。マークされていない入力をすぐに識別できないことがあります。これは非常に「デザイン的に美しい」ため、Chromeの最新バージョンでは、選択したチェックボックスが下品なシアン色になっています。

だから状況

注文、会計、倉庫などに関連する特定のソフトウェア製品を使用している会社は3社あります。顧客、パートナー、パフォーマーなどと協力します。



マーケターや広告主もそれを使用します。このシステムが何をするか（何に書かれていても）は関係ありません。



そして、この製品のサイトには、多くの入力チェックボックスとラジオがあるフォームを含む多くのページがあることが重要です。

従業員の苦情

監督：大画面では「クリジキ」が見づらく見えません。

主任会計士：私のコンピューターでは、「クリジキ」はこのように見えます。従業員では見た目が異なり、自宅でも異なりますが、タブレットではまったく異なります。

マーケター：選択されていないポジションの一部が赤になり、選択された他のポジションが緑になる可能性はありますか？

等。

だからタスク

1. 最小限のコストと最小限の変更で、チェックボックスとラジオボックスの外観を修正します。
2. さまざまなユーザーのチェックボックスとラジオボックスのスタイルを作成します。重要：これは閉鎖されたサイトであり、「すべて私たち自身」があり、「美しさ」は必要ありませんが、知覚の有効性は必要です。

許可されていないこと

1.サーバー側には触れないでください。

2. javascriptファイルに触れることはできません。また、独自のjavascriptを挿入することもできません。

3.cssファイルには触れられません。

許可されるもの

1.htmlテンプレートを編集します。

2.すべてのユーザーのスタイルファイルを作成します。

4.特定のユーザーまたはユーザーグループのスタイルファイルを作成します。

そして、あなたがしたことはすぐにcodepen.ioを見ることができますが、さらに読むことをお勧めします。

予備調査は示した

1.ほとんどすべての<inputtype = "checkbox">には名前フィールドがあり、IDがないものもあります。

2.すべての<inputtype = "radio">には名前フィールドがあり、一部にはIDがあります。

3.したがって、cssでは、idとnameの両方でチェックボックスにアクセスできます。無線へ-IDまたは親の子の番号のいずれかによって。



ソースコードスニペット：

/*  1 */
<tag><input type="checkbox">  </tag>

/*  2 */
<tag><input type="checkbox">  <br>
<input type="checkbox">  </tag>

/*  3 */
...<label><input type="checkbox">  </label>...

/*  4 */
<td><input id="idxxx" type="checkbox"></td>
<td><label for="idxxx"> </label></td>

コードを修正しましょう：

/*  1 */
<tag><label class="new-input"><input type="checkbox"><s></s><span> </span></label></tag>

/*  2 */
<tag><label class="new-input"><input type="checkbox"><s></s><span> </span></label><br>...</tag>

/*  3 */
...<label class="new-input"><input type="checkbox"><s></s><span> </span></label>...

/*  4 */
<td><label class="new-input new-input-one"><input id="idxxx" type="checkbox"><s></s></label></td>
<td><label for="idxxx"> </label></td>

<input type = "radio">でもすべて同じで、LABELのクラスも同じです。

あなたは正確に何をしましたか？

1. 各入力（オプション3の船尾）は、クラスでLABELタグでラップされています。オプション3はクラスを追加したばかりです。
2. 入力の直後に空のSタグを挿入しましたが、入力自体は表示されないため、このタグはこの入力をレンダリングします。
3. 付随するテキストはSPANタグでラップされました（オプション4を除く）。このタグは、このテキストに対する視覚入力の配置を決定するときに必要になります。
4. オプション4は、付随するテキストがテーブルの別のセルにあるため、この配置を回避するために別のクラスが追加されました。厳密に言えば、反対のことを行う必要があります-オプション1〜3にアライメントを担当するクラスを追加します。しかし、4番目のものよりもはるかに多くのオプション1〜3があり、htmlを膨らませないために、このように行われます。

ボックスサイズ設定に関するいくつかの予備的な考慮事項とcssの調整：border-box、LABEL正規化、A + B、A〜B、および[attr]セレクター、：チェック済み、：無効、::疑似クラスの前。自分が何を知っているのか、または自分の知識を更新したいのかわからない人は誰でも、カットの下に見えます。

それでは、入力のレンダリングを始めましょう

例N1。最も単純なもの-アルファベット文字を使用します

。htmlコードは同じで、cssは次のようになります。

/* s1 */
.new-input > INPUT + S::before {
  content: "c";
}
/* s2 */
.new-input > INPUT:checked + S::before {
  content: "V";
}
/* s3 */
.new-input > INPUT[type="radio"] + S::before {
  content: "r";
}
/* s4 */
.new-input > INPUT[type="radio"]:checked + S::before {
  content: "X";
}
/* s5 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s6 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}
/* s7 */
.new-input > S::before {
  display: inline-block;
  width: 1.25em;
  text-align: center;
  color: #fafafa;
  background-color: #37474f;
}
/* s8 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}

Sタグは入力をレンダリングします。ただし、機能ごとに「分割」します。Sタグ自体が、LABELでの配置と、次のSPANに対する位置合わせを担当します。



また、疑似要素S :: beforeはSタグ内に配置され、入力として機能します。s1



行は、入力が選択されていないときにS ::の前に配置される文字を定義します。原則として、「。new-input> INPUT：not（：checked）+ S :: before」と書く必要がありますが、一部のブラウザ（IEなど）ではそのような構成を実行できない場合があります。 文字列s2は、入力が選択されたときの文字を指定します。s3およびs4 ラインは、入力無線に対して同じことを行います。 文字列s5





入力がブロックされた場合に何が起こるかを説明します-この場合、Sタグは半分透明になります。

行s6は配置を定義します。この場合、左右にパディングを与えます（この例のみ）。さらに、通常のストライクスルーを削除します。

線s7は正方形になり、s8は入力無線用の円になります。



例1はcodepen.ioで見ることができます。ネイティブ入力と新しい入力があります。前者は削除できます。







質問：



特別なキャラクターを使用できますか？このように：

□■▢▣○●◎◉

適切なサイズを与えると、それだけです。番号？



回答：



できます。しかし、そうする必要はありません。大きな痔核があり、希望のサイズの割り当て、垂直方向の配置、トリミングなどでタンボウリンと踊ります。さらに、ブラウザが異なれば、これらのシンボルの動作も異なります。

私たちは逆に行きました。最後の例にはこのアイデアの実装が含まれていますが。



例N2。cssを使用して入力要素を「描画」します



。htmlコードは同じですが、cssは次のようになります。

/* s1 */
.new-input > S::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border: 1px solid currentColor;
  padding: 2px;
  background-clip: content-box;
  border-radius: 20%;
}
/* s2 */
.new-input > INPUT[type="radio"] + S::before {
  border-radius: 50%;
}
/* s3 */
.new-input > INPUT:checked + S::before {
  background-color: currentColor;
}
/* s4 */
.new-input > INPUT:disabled + S::before {
  opacity: 0.5;
}
/* s5 */
.new-input > S {
  text-decoration: none;
  margin-left: 3px;
  margin-right: 6px;
}

s1 行は、入力をレンダリングする前にS ::を定義します。これは、幅と高さが0.75emに設定されたインラインブロックになります。これは大文字とほぼ同じ高さで、親のフォントサイズによって異なります。細い境界線は、現在の色、内側のパディング、角の小さな丸みで設定されます。そして最も重要なのは！ -プロパティbackground-clip：content-boxが設定されています。これは非常に興味深いプロパティです。background-colorが設定されている場合、コンテンツ部分のみがペイントされ、パディングには影響しません。私たちの必要なもの。無線入力



のs2ラインはラウンド前にS ::になります。マークされた入力

のs3行は、background-colorの前にS ::を現在の色に設定します。つまり、内部に正方形または円を「描画」します。

ラインs4は入力のロックを解除し、行s5は左右にパディングを与えます。



この方法の利点

1. すべてがとてもシンプルです。すべてのブラウザで動作します。IE10でさえ（11番目のエミュレーションで）。
2. あなたは好きなように着色することができます。
3. S :: beforeはインラインブロックであるため、ベースラインの下部に正確に配置され、どこからも外れません。テキストよりも高い場合は、単に行の高さを増やし、ベースラインに留まります。
4. 入力ビジュアライゼーションはSタグ内にあるため、簡単に配置および位置合わせできます。
5. S :: beforeのemの寸法により、キャプションテキストのサイズに対する相対的なサイズを設定できます。たとえば、高さと幅の制​​限を設定できます。

この方法のデメリット



主にemサイズ。実際には、計算時の幅と高さ（emからpx）の値が分数になる場合があります。通常の画面の通常のコンピューターでは、丸めが正しく機能しない場合があります。たとえば、同じMozilaの12.8px x 12.8pxの寸法は、13px x12pxになる可能性があります。次に、固定サイズを設定する必要があります。最新のモニターやビデオカード、ラップトップ、タブレット、スマートフォンでは、ブラウザーのポイント（ピクセル）が複数の画面ピクセルで構成されているため、これは発生しません。



例2はcodepen.ioで見ることができます。ネイティブ入力と新しい入力があります。前者は削除できます。

したがって、最初のタスク（入力のレンダリング）が実行されます。選択した「カラーリング」に渡します。

着色入力

例：html：

<label class="new-input"><input name="chb1" type="checkbox" ...><s></s><span> </span></label>
<label class="new-input"><input id="rb1" type="radio" ...><s></s><span> </span></label>

チェックボックスタイプの入力を名前で参照し、ラジオをIDで参照します。



すべてを青く塗る

/*  input */
.new-input > INPUT[name="chb1"] + S,
.new-input > INPUT#rb1 + S {
  color: #0091ea;
}
/*  text */
.new-input > INPUT[name="chb1"] ~ SPAN,
.new-input > INPUT#rb1 ~ SPAN {
  color: #0091ea;
}
/*   */
.new-input > INPUT[name="chb1"] ~ *,
.new-input > INPUT#rb1 ~ * {
  color: #0091ea;
}

cssの特異性を覚えておいてください。これらのスタイルは基本的なスタイルよりも特異的であり、間違いなく機能します。それらは上記のものとどのように異なりますか？選択した入力にのみ適用されるもの-指定された名前とID値を持つもの。



選択されていない入力があまり見栄えが良くないことを除いて、ここではすべて問題ありません-細い青い境界線はほとんど目立ちません。



入力を選択すると緑色になります

/*  input */
.new-input > INPUT[name="chb1"]:checked + S,
.new-input > INPUT#rb1:checked + S {
  color: #00c853;
}
/*  text */
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}
/*   */
.new-input > INPUT[name="chb1"]:checked ~ *,
.new-input > INPUT#rb1:checked ~ * {
  color: #00c853;
}

私の意見では、最初のオプションはあまり良くありません-フレームと内側の正方形/円の両方が緑色になります。あなたはそれを着色することができるだけです。

/*  input    */
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}

入力が選択されていない場合は赤色で表示されます

/*  input */
.new-input > INPUT[name="chb1"]:not(:checked) + S,
.new-input > INPUT#rb1:not(:checked) + S {
  color: #d50000;
}
/*  text */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
}
/*   */
.new-input > INPUT[name="chb1"]:not(:checked) ~ *,
.new-input > INPUT#rb1:not(:checked) ~ * {
  color: #d50000;
}

論理は明確ですか？より複雑なデザインを作成し続けることができます。



たとえば、入力が選択されていない場合、テキストは赤で太字になり、内側の入力要素とテキストが選択されている場合は、緑になります。初級！

/* ,    */
.new-input > INPUT[name="chb1"]:not(:checked) ~ SPAN,
.new-input > INPUT#rb1:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
/*   input,   */ 
.new-input > INPUT[name="chb1"]:checked + S::before,
.new-input > INPUT#rb1:checked + S::before {
  background-color: #00c853;
}
/* ,   */ 
.new-input > INPUT[name="chb1"]:checked ~ SPAN,
.new-input > INPUT#rb1:checked ~ SPAN {
  color: #00c853;
}

また、たとえば、入力のグループ全体（10〜15個）を処理する必要があります。たくさんの行を書かないようにするために、それらの共通の親（.parent_element）を見つけて、条件を短くすることができます。

.parent_element > .new-input > INPUT:not(:checked) ~ SPAN {
  color: #d50000;
  font-weight: bold;
}
.parent_element > .new-input > INPUT:checked + S::before {
  background-color: #00c853;
}
.parent_element > .new-input > INPUT:checked ~ SPAN {
  color: #00c853;
}

codepen.io の最後の例ですべてを見ることができます



それはそうです、そしてそれはそれです。それは完璧主義者の「誕生の印をひっかいて」、つまり整列の問題だけにとどまります。

視覚的な入力と付随するテキストを揃える

まず、テキストの配置や書式設定などについてよく知られていることを思い出させてください。すべてがカットされています。





SPANの付随するテキストが2行または3行で表示されるとどうなりますか？明らかに、それは入力の下で「適合」します。それはきれいではありません、それは修正される必要があります。



古代の方法の1つは、Sタグがfloat：左、SPANタグがdisplay：blockおよびoverflow：hiddenです。



これにより、テキストの列が作成されます。それらのいくつかには適切なマージンがあり、それらの間にスキップが生じると想定されます。さて、SPAN後のフロートの終了を伴う痔核も追加されています。最新のルートを使用します-flexboxを使用します。彼はここでは完全に場違いです。

.new-input {
  display: flex;
  flex-direction: row;
  align-items: start;
}
.new-input > S {
  margin-right: 4px;
  flex: 0 0 auto;
}
.new-input > SPAN {
  flex: 0 1 auto;
}

この場合、LABELタグ（.new-input）はflexになり、SとSPANはブロックになり、LABELの上部に配置されます。SPANのテキストは、必要に応じて数行になります。このため、視覚的な入力は以前のS ::で説明されていました。高さに関係なく、SPAN S :: beforeは最初のSPANラインに揃えられます。または、align-items：centerを指定することもできます。1行のSPANを使用すると、視覚的な入力が上部に表示され、中央に2行、2行目に3行が表示されます。最後の例では、入力の場所を切り替えることができます。

それで全部です

それが誰かにとって面白くて役に立ったことを願っています。私をあまり叱らないでください-これはHabrでの私の最初の経験です。



例1は、入力の変更と隣接する要素との間の相互作用のデモンストレーションにすぎません。



例N2-ソリューションの基礎としてcssを使用した入力の視覚化。



最後の例は、一緒に説明されているすべてです。

特定の実装について

特定のユーザーが編集できるフィールドのブロックがかすかな背景で強調表示され、残りの入力には無効なプロパティがあり、情報のみを提供する広範なフォームがありました。したがって、スタイル「.new-input> INPUT：disabled + S :: before」は適用されませんでした。

UPD

コメントへの応答例N3。

職場での隠し入力に対するキーとフォーカスのサポートがあります。