ホームページ > 記事 > ウェブフロントエンド > CSS と HTML を使用してチェックボックスの効果をカスタマイズする方法

CSS と HTML を使用してチェックボックスの効果をカスタマイズする方法

不言オリジナル: 2018-06-20 10:11:391470ブラウズ

チェックボックスは、より一般的に使用される HTML 関数であるはずですが、ブラウザーに付属のチェックボックスはあまり見栄えがよくないことが多く、その効果はブラウザーによって異なります。以下に CSS+HTML カスタムチェックボックスの効果を共有します。、見てみましょう

チェックボックスは比較的一般的な HTML 関数のはずですが、ブラウザーに付属のチェックボックスはあまり見栄えがよくないことが多く、効果はブラウザーによって異なります。視覚効果を美しく統一する必要性から、チェックボックスのカスタマイズが提案されました。導入方法をまとめてみました。

実装アイデア

純粋なCSS実装の主な手段は、labelタグのシミュレーション機能を使用することです。 label の for 属性は、入力自体がユーザーに表示されない場合でも、それに対応するラベルがあれば、ユーザーはラベル label を操作することでネイティブ入力を直接置き換えることができます。これにより、スタイルシミュレーションに余裕が生まれます。つまり、

ネイティブ入力を非表示にして、スタイル定義プロセスをラベルに任せます (それなら、チェックボックスのスタイルを直接変更しないのはなぜでしょうか? チェックボックスはブラウザのデフォルトのコンポーネントであるため、スタイルの変更はラベルほど便利ではありません)チェックボックスの多くの属性は、背景など機能しません。また、ラベルはスタイルの点では基本的に p と同じであり、「他人のなすがまま」です)
そして、選択イベントでは、 CSSの「隣接セレクタ(E+F)」を利用しましょう。 HTMLのデフォルトのチェックボックスをそのまま利用できるので、JSシミュレーションの選択の手間が省けます。

demo

DEMO の一部の CSS3 属性には Webkit プレフィックスしかないため、このページを表示するには Webkit Core を備えたブラウザを使用することをお勧めします

HTML コード:

<p class="wrap">
    <!-- `input`的id必须有，这个是label进行元素匹配所必需的 -->
    <!-- 可以看到每个input的id和label的“for”属性对应同一字符串 -->
<input type="checkbox" id="checkbox01" />
<label for="checkbox01"></label>
<input type="checkbox" id="checkbox02" />
<label for="checkbox02"></label>
<input type="checkbox" id="checkbox03" />
<label for="checkbox03"></label>
<input type="checkbox" id="checkbox04" />
<label for="checkbox04"></label>

HTML がビルドされ、次は対応するCSS。

.wrap {
  width: 500px;
  background-color: #EEE;
  border: 2px solid #DEF;
}
/* 隐藏所有checkbox */
input[type=&#39;checkbox&#39;] {
  display: none;
}
/* 对label进行模拟.背景图片随便拼凑的，不要吐槽品味*/
/*   transition效果是做个背景切换效果，这里单纯演示而已，实际上这个过渡不加更自然*/
label {
  display: inline-block;
  width: 60px;
  height: 60px;
  position: relative;
  background: url(//www.chitanda.me/images/blank.png);
  background-position: 0 0px;
  -webkit-transition: background 0.5s linear;
}
/*  利用相邻选择符和checkbox`:checked`的状态伪类来模拟默认选中效果（就是点击后那个勾号的效果）  */
/*如果这段代码注释，点击后将没有任何反馈给用户*/
/*因为label本身是没有点击后被选中的状态的，checkbox被隐藏后，这个状态只能手动模拟*/
input[type=&#39;checkbox&#39;]:checked+label {
  background-position: 0 -60px;
}

上記のコードの効果は以下の通りですが、問題ないようです。

しかし、よく考えてみると、オプションに対応するプロンプトテキストが欠けているように思えます

CSSを知らない初心者は、この時点で、テキストを追加するためにpタグまたはspanタグを使用する可能性がありますラベルの後。しかし、このアプローチはあまりエレガントではありません。個人的には、CSS の ::before と ::after 疑似要素を使用することをお勧めします (::before と :before は同じものです。ただし、「疑似要素」と「疑似クラス」を区別するために、W3C は次のように記述することを推奨しています)メソッドは、疑似要素に :: を使用することです。そして、疑似クラスが使用されます:)
ここでは、疑似要素の具体的な内容については詳しく説明しません (実際、疑似要素に関する私の知識はその使用に限られています)。、私はこれを理解できないので、他の人に誤解を与えないようにします)

/* 擬似要素の効果は非常に単純で、`content` を定義するだけで、他の属性は通常の p と同じです */

label::after {
   content: attr(data-name);
   /*利用attr可以减少css代码量,data-name写在html部分的label属性里*/
  display: inline-block;
  position: relative;
  width: 120px;
  height: 60px;
  left: 100%;
  vertical-align: middle;
  margin: 10px;
}

もちろん、::after を使用してラベルテキストをシミュレートできるため、ラベルのチェックボックススタイルはここでは分析されません。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

CSS と HTML を使用してチェックボックスの効果をカスタマイズする方法

関連記事