あまり多くのコードを書かずに、ハイパーリンクを使ってシンプルで美しいカスタムチェックボックスを実装できます。
|
今日ふと、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 の使い方 (オーバーフローの非表示とフロートのクリア)
推薦する
SWFObjectを使用すると、HTMLにFlashを挿入する際のブラウザ互換性の問題を完全に解決できます。
一緒に学びましょう1. 伝統的な方法コードをコピーコードは次のとおりです。 <object c...
Mysql 5.7.18 MySQL proxies_priv を使用して同様のユーザーグループ管理を実装する
MySQL proxies_priv（シミュレートされたロール）を使用して同様のユーザーグループ管理...
jsの継承の6つの方法を詳しく解説
プロトタイプチェーン継承プロトタイプ継承は、ECMAScript における主な継承方法です。基本的な...
Vue で @person 関数を実装する方法
この記事ではvueを使用し、マウスクリックイベントといくつかの小さなページの最適化を追加します。 基...
Docker データ管理 (データ ボリュームとデータ ボリューム コンテナー) の詳細な説明
実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共有す...
VMware CentOS 仮想マシンのインストールとネットワーク構成のグラフィックチュートリアル
1. CentOSイメージをダウンロードする1.1 ダウンロードウェブサイトhttp://mirro...
CSS子要素選択親要素の実装
通常、CSS セレクターは上から下に選択し、親要素を介して子要素を選択します。では、子要素を介して親...
Vue を使用して 2 つのデータ セットの違いを比較する視覚化コンポーネントの詳細な説明
目次必要：要点:これまでの要点に従って、コンポーネントのプロパティを確立できます。コンポーネントの基...
MySQL 8.0.11 インストール概要チュートリアル図
インストール環境: CAT /etc/os-release CentOS システムのバージョン情報を...
Vue は動的な円形のパーセンテージ進捗バーを実装します
最近、小さなプログラムを開発しているときに、次の設計図のような円形のパーセンテージ進捗状況バーを実装...
リバースプロキシ設定を実装するためのユニバーサルnginxインターフェース
1. プロキシサーバーとは何ですか?プロキシ サーバーは、クライアントが要求を送信すると、それを直接...
データバインディングとリストデータの表示にはVue3を使用する
目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...
nginxを使用してドメイン名ベースの仮想ホストを構成する
1. 仮想ホストとは何ですか?仮想ホストは、特殊なテクノロジーを使用して、実行中のサーバーを論理的に...
Linux で MySQL をインストールする簡単な方法
Linux に MySQL をインストールする方法をオンラインで検索すると、多くの方法が表示されまし...
Linux で crontab を使用してスケジュールされたタスクを追加する方法
序文Linux システムはシステム サービス crond によって制御されます。 Linux システ...