あまり多くのコードを書かずに、ハイパーリンクを使ってシンプルで美しいカスタムチェックボックスを実装できます。
|
今日ふと、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 の使い方 (オーバーフローの非表示とフロートのクリア)
推薦する
ウェブページにコンテンツが多すぎる場合に、下から上へ素早く戻る方法
Web フロントエンド開発では、ページに多くの記事を表示することが避けられません。記事の最後にあるク...
Nginx レイヤー 4 負荷分散構成ガイド
1. レイヤー4負荷分散の概要レイヤー 4 ロード バランシングとは何ですか?いわゆる 4 層負荷分...
JS addEventListener() およびattachEvent() メソッドは登録イベントを実装します
JavaScript の DOM イベント モデルでは、オブジェクトの addEventListen...
CentOS ベースの OpenStack 環境の展開に関する詳細なチュートリアル (OpenStack のインストール)
エフェクト表示: 環境準備コントローラーノード: 6GB 4時間60GB/30GB/30GB計算ノー...
マークアップ言語 - 印刷スタイルシート
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
純粋なテキストとアイコン付きのボタンを実現するための HTML+CSS
この記事では、いくつかの基本的なページ要素の実装方法をまとめており、後で更新される予定です。まず、私...
Windows Server2014 にセキュリティを適用して MySQL をインストールする際のエラーに対する完璧な解決策
理由はインストール後にきちんとアンインストールされなかったためです。この問題を解決するには、次の点に...
Linux に MySQL 8.0.x をインストールするための完全な手順
マイグレーションMySQL 入門MySQL はもともとオープンソースのリレーショナル データベース管...
CSSでプロセスナビゲーション効果を実現する（3つの方法）
CSS によりプロセスナビゲーション効果を実現します。具体的な内容は以下のとおりです。 ::tip...
Vueは携帯電話のカメラとアルバムを呼び出す機能を実装します
この記事では、携帯電話のカメラとアルバムにアクセスするためのVueの具体的なコードを参考までに共有し...
CSS3はグラフィックの落下アニメーション効果を実現します
まずは効果を確認実装コード <div class="box box1"&g...
React構成サブルーティングの実装
1. コンポーネント First.js にはサブコンポーネントがあります。 './Admin...
jsはショッピングウェブサイトの商品の拡大鏡効果を実現します
この記事では、ショッピングサイトの商品の拡大鏡効果を実現するためのjsの具体的なコードを紹介します。...
WeChatミニプログラムをTencent Mapsに接続する2つの方法
最近、WeChat アプレットを作成しているのですが、いくつか問題が発生しました。インターネットでい...
ウェブページで CSS スタイルを適用するさまざまな形式の概要
1. インライン スタイル (<body></body> 内に配置されます)...