CSS疑似クラスの右下隅をクリックすると、選択されたサンプルコードを示すチェックマークが表示されます。

CSS疑似クラスの右下隅をクリックすると、選択されたサンプルコードを示すチェックマークが表示されます。

効果:

ここに画像の説明を挿入

css:

.s_type {
    境界線: なし;
    境界線の半径: 5px;
    背景色: #f3f3f3;
    パディング: 7px 0;
    色: #606266;
    マージン: 5px 2.5% 5px 0;
    幅: 30%;
    位置: 相対的;
}

.select {
    背景色: #ebf3ff;
    色: #5999fc;
}

.select {
    背景色: #ebf3ff;
    色: #5999fc;
}

.select:before {
    コンテンツ: '';
    位置: 絶対;
    右: 0;
    下部: 0;
    境界線: 9px 実線 #5999fc;
    境界線上部の色: 透明;
    左境界線の色: 透明;
}

html:

<button class="s_type">すべて</button>
<button class="s_type">2020年夏</button>

js:

$('.s_type').on('クリック',function(){
$(this).toggleClass('select');
});

1: ボタン自体のスタイルをデザインする (.s_type)
2: 追加したいスタイルに別のクラス名を追加します(.select)
3: クリックイベントを通じて要素にスタイルを追加する

最初は、疑似クラスにコンテンツ「✔」を直接追加するなど、さまざまな方法を考えましたが、その結果、チェックマークの背景色がなく、直接白色になり、受け入れられませんでした。 UI 画像を直接切り取って、背景や画像をボタン上に直接浮かべることも考えましたが、後になってこれは間違っていると思いました。次に、まず他の関数に取り組んで書き出し、その後でこの関数に取り組みます。たまたま自分が必要としていた機能と同じ内容の記事を見かけましたので、こちらのブログにそのまま従って書いてみました。 。 。そしたら効果が出てきました笑笑笑

その後、UIライブラリを調べてみると、QQのUIライブラリにも特別なコーナーマークデザイン(アドレス)があることがわかりました。

付録: CSSチェックボックススタイルを見てみましょう

次に挙げる選択されたスタイルは、プロジェクトでよく使用されます。

チェックボックスをオンにする

オンラインで検索したところ、長方形を変形し、疑似要素を通じて下付き文字の CSS スタイルを実装するというアイデアが見つかりました。

.select {
		位置: 相対的;
		幅:81ピクセル;
		高さ:93px;
		マージン: 0 自動;
		テキスト配置: 中央;
		行の高さ: 93px;
		色: #4ABE84;
		背景色: #fff;
		ボックスの影:0px 2px 7px 0px rgba(85,110,97,0.35);
		境界線の半径:7px;
		境界線:1px実線rgba(74,190,132,1);
	}
	.select:before {
		コンテンツ: '';
		位置: 絶対;
		右: 0;
		下部: 0;
		境界線: 17px 実線 #4ABE84;
		境界線上部の色: 透明;
		左境界線の色: 透明;
	}
	.select:after {
		コンテンツ: '';
		幅: 5px;
		高さ: 12px;
		位置: 絶対;
		右: 6px;
		下: 6px;
		境界線: 2px 実線 #fff;
		境界線上部の色: 透明;
		左境界線の色: 透明;
		変換: 回転(45度);
	}

次に、div を使用して効果を表示します。

<div class="select">テスト</div>

仕上げる。

CSS 擬似クラスの右下隅のチェックマークをクリックして選択を示すサンプルコードについてはこれで終了です。CSS の右下隅のチェックマークの詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQLでSELECT文が実行される仕組み

>>:  負のマージントップ値は、ラベルテキストと入力の間の垂直中央揃えの問題を解決します。

推薦する

Vueストレージにはブール値のソリューションが含まれています

Vueはブール値でストレージを保存します今日、問題に遭遇しました。バックグラウンドから返された真偽の...

JS初心者が配列を処理するための実践的な方法のまとめ

join() メソッド: 指定された区切り文字を使用して配列内のすべての要素を文字列に接続します。例...

フロントエンド開発に必須:推奨されるブラウザ互換性テストツール 12 選

フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...

MySQL パーティション関数の詳細な説明と例の分析

まず、データベース パーティショニングとは何でしょうか?以前、MySQL のテーブル パーティショニ...

JavaScript で 24 以上の配列メソッドを手動で実装する

目次1. トラバーサルクラス1. 各2. 地図3. すべての4. いくつか5. フィルター6. 減ら...

Dockerはmysqldumpコマンドを使用してプロジェクト内のmysqlデータをバックアップおよびエクスポートします。

mysqldump コマンドはじめに: データベースバックアッププログラム形式: mysqldum...

Dockerボリューム権限管理の詳細な説明

ボリュームデータボリュームは Docker の重要な概念です。データ ボリュームは、1 つ以上のコン...

CSS を使用してマウスをホバーすることで他のタグのスタイルを変更するサンプルコード

序文:私の知る限り、現在 CSS で制御できるのは、タグをホバーしたときにそのタグの下の兄弟タグとサ...

MySQL InnoDB ReplicaSet の簡単な紹介

目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...

Portainer を使用した Docker コンテナのデプロイのプロジェクト実践

目次1. 背景2. 操作手順3. Portinerをインストールする3.1 Dockerのデプロイメ...

CentOS 7.2 に SuPHP をインストールするための詳細な手順

デフォルトでは、CentOS 7 上の PHP は apache または nobody として実行さ...

Dockerコマンドの学習を1つの記事にまとめる

目次導入ミラーリポジトリログイン引く押す検索ローカル画像管理画像rmiタグ建てる歴史保存負荷輸入コン...

クラウドサーバーを購入し、Alibaba Cloud に Pagoda Panel をインストールする手順

アリババクラウドがサーバーを購入クラウドサーバーを購入し、サーバーバージョンとしてcentos 7....

アイデアがWebプロジェクトを公開した後、Tomcatサーバーがプロジェクトとそのソリューションを見つけることができません

概要プロジェクトは正常に作成され、正常にデプロイされましたが、以下に示すように、Tomcat サーバ...

画像の色を変更するための純粋なCSS

画像の色を変更するための CSS テクニックは非常にシンプルです。具体的なコードは次のとおりです。ヒ...