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文が実行される仕組み

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