HTMLでのチェックボックスの選択スタイル設定について

たとえば、テイクアウトサービスエリアでは、選択は複数選択であり、チェックボックススタイルのボックスは通常非表示になっています。ユーザーエクスペリエンスを向上させるために、ラベルのフォントと設定の外枠のみが選択スタイルの制御に残されます。

このとき、チェックボックスを処理する必要があります

私がまとめた方法の1つは、checkedに従って設定することです

例:

<p>
      <input name="area" type="checkbox" value="1" id="check1"/>
       <label for="check1">桥西区</label>
 </p>

ここでは、pタグにチェックボックスとラベルを書きます。テキストをクリックして選択します。

選択後のスタイル制御:

/*选矿*/
        .select-ul li p label,
        .type-list-ul li p label{
            font-size: 0.28rem;color: #666;
            width: 100%;height: 100%;display:  inline-block;
            border-color: #666;
            border-style: solid;
            border-width: 1px;
            border-radius: 0.1rem;
        }
        .type-list-ul li p label{width: auto;padding: 0 0.1rem;}
        .select-ul li p{
            height: 0.5rem;
            width: 1.5rem;
            display: inline-block;
            line-height: 0.5rem;
        }
        .type-list-ul li p{
            /*padding: 0 0.1rem;*/
            height: 0.5rem;
            /* width: 1.5rem; */
            display: inline-block;
            line-height: 0.5rem;
        }
        .select-ul li p input[type=checkbox]:checked + label,
        .type-list-ul p input[type=checkbox]:checked + label{
            border-color: #FA8072;
            color: #FA8072;
        }

要約すると、

 .select-ul li p input[type=checkbox]:checked + label{}

を使用してスタイルを制御します。

一般領域を選択すると、チェックボックスのスタイルが非表示になり、ユーザーエクスペリエンスを向上させるためにクリック後に色が変わるフォントボックスのみが残ります。

拡張子:

Web ページを作成するときは、通常、テキスト情報をクリックし、同時にチェックボックスを選択する必要があります。

古い方法では、テキストにクリック イベントを追加して、チェックボックスの選択

//jq中：
//选中$("#ID").attr("checked","checked");//不选中$("#ID").removeAttr("checked");
//js中： var boxes = document.getElementsByName("test"); boxes[i].checked = true;

これは便利です。 メソッド:

<p>
   <input name="fittype" type="checkbox" value="8" id="checkin8"/>
   <label for="checkin8">其他</label></p>

input と label を同じラベル p に置き、同時に label の for 属性の値が input の id 属性の値と等しくなります。ラベルをクリックすると同時に入力を制御できます

以上がHTMLでのチェックボックスの選択スタイル設定についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。