CSS3 を使用して入力複数選択ボックスのスタイルをカスタマイズする例

CSS3 を使用して入力複数選択ボックスのスタイルをカスタマイズする例

原則: まず入力要素を非表示にし、次に CSS を使用してラベル要素のスタイルを設定します (他の要素も使用できます)。選択したら、画像や JS を使用せずに、input:check+label を使用してラベルを選択します。

効果プレビュー

HTMLコード

 <div class="radio">
    <input type="checkbox" id="sex1">
    <label for="sex1"></label>
    男
<div class="radio">
    <input type="checkbox" id="sex2">
    <label for="sex2"></label> 女性</div>

CSSコード

.ラジオ{
    位置: 相対的;
    表示: インラインブロック;
    右マージン: 12px;
}

.ラジオ入力{
    幅: 15px;
    高さ: 15px;
    appearance: none;/*デフォルトのスタイルをクリア*/
    -webkit-appearance: なし;
    不透明度: 0;
    アウトライン: なし;
    z-index: 8; /*入力レベルをラベルより高くして選択できるようにします*/
    
}

.ラジオラベル{
    位置: 絶対;
    左: 0;
    上: 6px;
    幅: 15px;
    高さ: 15px;
    境界線: 1px 実線 #3582E9;
}

.radio 入力:チェック済み+ラベル::after {
    コンテンツ: "";
    位置: 絶対;
    左: 4px;
    上: 0px;
    /* ここでは長方形の半分が表示され、チェックマーク スタイルを実現するために 45 度回転されます */
    幅: 5px;
    高さ: 12px;
    右境界線: 1px 実線 #000000;
    下境界線: 1px 実線 #000000;
    変換: 回転(45度);
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  基本的なウェブページパフォーマンス最適化ルールの簡単な概要

>>:  Nginx で同じドメイン名を持つ複数のプロジェクトを構成する方法

推薦する

VantフレームワークをWeChatアプレットに導入するプロセス全体の記録

序文WeChat ミニプログラムのネイティブ UI が少し物足りないと感じることがあるので、サードパ...

ネイティブ CSS で無限テキストカルーセルを実装する一般的な方法

テキストカルーセルは私たちの日常生活で非常に一般的です。スーパーマーケットや実店舗の入り口には、テキ...

VueにおけるAxios非同期通信の詳細な説明

1. まず、インタラクティブに使用するための .json ファイルを作成します。json データ形式...

MySQL の中国語文字化け問題の解決方法

1. LinuxのMySQLで中国語の文字化けが発生する。以下の操作を実行する。 vi /etc/m...

Nginx で Brotli 圧縮アルゴリズムを有効にする方法の例

Brotli は、Zopfli よりも 20 ~ 26% 高い圧縮率を実現できる新しいデータ形式です...

Docker-compose を使用して ELK クラスターを構築する方法

すべてのオーケストレーション ファイルと構成ファイルは、私の Github からアクセスできます。構...

UIエンジニアのキャリアについての私たちの考え

私は長い間落ち込んでいます、なぜでしょうか?以前、お客様から、提供されたソフトウェアが正常に動作しな...

Tomcat イメージをインストールして Docker に Web プロジェクトをデプロイする方法を簡単に説明します。

1. Tomcatをインストールする1. Docker HubでTomcatイメージを見つける d...

CentOS7 64 ビットでの MySQL 5.7 のインストールと設定のチュートリアル

インストール環境: CentOS7 64ビットMINI版、MySQL5.7をインストール1. YUM...

Ubuntu環境でPHPとNginxをコンパイルしてインストールする方法

この記事では、Ubuntu 環境で PHP と Nginx をコンパイルしてインストールする方法につ...

モバイルウェブ画面適応(rem)

序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...

Nginx 書き換えジャンプの適用シナリオの詳細な説明

アプリケーションシナリオ1: ドメイン名ベースのリダイレクト会社の古いドメイン名は www.accp...

Linux システムのシャットダウンコマンドの違いと使い方の詳細な説明

Linux システムのシャットダウン コマンドは何ですか? Liangxu Tutorial Net...

フォームのデフォルトの送信方法を変更する方法

htmlのデフォルトの送信方法は、postではなくgetです。postに変更したい場合は、 meth...