効果: 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) 最初は、疑似クラスにコンテンツ「✔」を直接追加するなど、さまざまな方法を考えましたが、その結果、チェックマークの背景色がなく、直接白色になり、受け入れられませんでした。 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 をよろしくお願いいたします。 |
>>: 負のマージントップ値は、ラベルテキストと入力の間の垂直中央揃えの問題を解決します。
Vueはブール値でストレージを保存します今日、問題に遭遇しました。バックグラウンドから返された真偽の...
join() メソッド: 指定された区切り文字を使用して配列内のすべての要素を文字列に接続します。例...
フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...
まず、データベース パーティショニングとは何でしょうか?以前、MySQL のテーブル パーティショニ...
目次1. トラバーサルクラス1. 各2. 地図3. すべての4. いくつか5. フィルター6. 減ら...
mysqldump コマンドはじめに: データベースバックアッププログラム形式: mysqldum...
ボリュームデータボリュームは Docker の重要な概念です。データ ボリュームは、1 つ以上のコン...
序文:私の知る限り、現在 CSS で制御できるのは、タグをホバーしたときにそのタグの下の兄弟タグとサ...
目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...
目次1. 背景2. 操作手順3. Portinerをインストールする3.1 Dockerのデプロイメ...
デフォルトでは、CentOS 7 上の PHP は apache または nobody として実行さ...
目次導入ミラーリポジトリログイン引く押す検索ローカル画像管理画像rmiタグ建てる歴史保存負荷輸入コン...
アリババクラウドがサーバーを購入クラウドサーバーを購入し、サーバーバージョンとしてcentos 7....
概要プロジェクトは正常に作成され、正常にデプロイされましたが、以下に示すように、Tomcat サーバ...
画像の色を変更するための CSS テクニックは非常にシンプルです。具体的なコードは次のとおりです。ヒ...