あまり多くのコードを書かずに、ハイパーリンクを使ってシンプルで美しいカスタムチェックボックスを実装できます。
|
今日ふと、HTML でチェックボックスのスタイルを変更できる範囲が限られていることと、チェックボックスを作るのに現在多くのコードが必要であることに気付いたので、簡単に実装する方法を考えてみました。これが実現可能であることは十分に証明されています。これ以上長々と説明せずに、参考までにソースコードを投稿します。 結果： 選択されていない場合:  選択すると: 画像の背景:  チェックボックス選択.jpg チェックボックスNoSel.jpgコード： HTML コード スニペット: コードをコピー コードは次のとおりです。<a name="checkWeek" class="divCheckBoxNoSel"></a> 月曜日 JavaScript コードスニペット: コードをコピー コードは次のとおりです。$("a[name='checkWeek']").click(function(){ if($(this).hasClass('divCheckBoxSel')){ $(this).removeClass('divCheckBoxSel'); }それ以外{ $(this).addClass('divCheckBoxSel'); } }); CSS コード スニペット: コードをコピー コードは次のとおりです。.divチェックボックスなし{ 背景: url("../image/checkboxNoSel.jpg") 繰り返しなし 中央 中央; フロート:左; 幅:15px; 高さ:15px; 境界線:1px 実線 #BDBDBD; 色:#FFF; } .divチェックボックス選択{ 背景: url("../image/checkboxSel.jpg") 繰り返しなし 中央 中央; フロート:左; 幅:15px; 高さ:15px; 境界線:1px 実線 #BDBDBD; 色:#FFF; } 各ハイパーリンクを区別する方法は多数あり、実際、ラジオ ボタンのようなテキストもこの方法で簡単に実現できるため、時間を節約できます。 |
<<: Docker+nacos+seata1.3.0 のインストールと使用設定チュートリアル
>>: CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)
推薦する
MySQL アップグレードのベストプラクティス
MySQL 5.7 には、オンライン DDL、マルチソース レプリケーション、拡張された半同期、テー...
Dockerコンテナとホスト間のデータ相互作用の概要
序文実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共...
vue-routeルーティング管理のインストールと設定方法
導入Vue Router 、 Vue.jsの公式ルーティング マネージャーです。 Vue.jsのコア...
docker pruneコマンドは、あまり使用されないデータを定期的にクリーンアップするために使用できます。
目次docker システム df docker システム プルーンNoneオブジェクトをクリーンアッ...
Web プロジェクトでの SQL インジェクションの防止
目次1. SQLインジェクションの概要2. SQLインジェクション攻撃の全体的な考え方SQLインジェ...
リモート Linux システムでポートが開いているかどうかを確認する 3 つの方法
これは、Linux 管理者だけでなく、私たち全員にとって非常に重要なトピックです。つまり、IT イン...
xtrabackup による MySQL データベースのバックアップと復元
mysqldump バックアップは、その独自の特性 (テーブルのロック、基本的に挿入スクリプトまたは...
Tomcat マルチインスタンスの展開と構成の原則
1. ファイアウォールをオフにし、Tomcatのインストールに必要なソフトウェアパッケージを/opt...
Tomcat Nativeを使用してTomcat IO効率を向上させる方法の詳細な説明
目次導入Tomcatへの接続方法APR と Tomcat ネイティブtomcat で APR を使用...
JSブラウザイベントモデルの詳細な説明
目次イベントとは簡単な例イベントをバインドする方法フレームワーク内のイベントイベントオブジェクトイベ...
MySQL バージョンは、2 つのタイムスタンプ型の値をサポートしていないバージョンよりも低いです。
MySQL エラー:エラー コード: 1293 テーブル定義が正しくありません。CURRENT_T...
Vueはズームイン、ズームアウト、ドラッグ機能を実装しています
この記事では、参考までに、ズームインとズームアウトのドラッグ機能を実現するためのVueの具体的なコー...
MySQLデータベース監視binlogを有効にする手順
序文多くの場合、ユーザーが自分のデータに対して実行する操作に基づいて何かを行う必要があります。たとえ...
ウェブページのカスタム選択ボックス選択
選択ドロップダウン リスト フォームは誰もがよく知っているかもしれませんが、デフォルトのドロップダウ...
MySQL データベース テーブルのパーティション分割に関する考慮事項 [推奨]
テーブル パーティショニングは、データベース パーティショニングとは異なります。では、テーブル パー...