皆様、いつもお世話になります。
質問
トグルボタンが3つあって、押した時、及び、カーソルがボタン上に乗った時の
色を変更したいのですが
色々調べましたが該当する情報を得る事が出来ませんでした。
良いお知恵をお貸しできないものでしょうか?
したい事
トグルボタンが3つあります。
「会員」、「非会員」、「店舗」
btn-outline-dangerを使い内部を透過してアウトラインのみの表示としています。
いずれかのボタンを押した時、及びカーソルが乗った時に
色を変更したいと思います。
※デフォルトではboostrapのdangerの色が適用されます。
このdangerの色を他の色にしたいのです。
内部ソース
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-outline-danger btn-sm"> <input type="radio" name="options" id="option1" autocomplete="off">会員 </label> <label class="btn btn-outline-danger btn-sm"> <input type="radio" name="options" id="option2" autocomplete="off">非会員 </label> <label class="btn btn-outline-danger btn-sm"> <input type="radio" name="options" id="option3" autocomplete="off">店舗 </label> </div> </body> </html>
手短ではありますがよろしくお願いいたします。
実施した事
以下の内容のスタイルシートを追加しましたが、今度は画面表示時のみ色が変わり
(透過色ではない状態となります。)
肝心のクリック時、カーソルが当たった時に色がdanger色に戻ってしまいます。
他に良い知恵はございませんでしょうか?
label.btn-outline-danger { color:#FF00FF; background-color:#FF00FF; border-color:#000000; }
回答3件
あなたの回答
tips
プレビュー