退会済みユーザー
2019/03/26 15:47 投稿
| bootstrap4でのトグルボタン背景色の変更 |
| 皆様、いつもお世話になります。 |
| ### 質問 |
| トグルボタンが３つあって、押した時、及び、カーソルがボタン上に乗った時の |
| 色を変更したいのですが |
| 色々調べましたが該当する情報を得る事が出来ませんでした。 |
| 良いお知恵をお貸しできないものでしょうか？ |
| ### したい事 |
| トグルボタンが３つあります。 |
| 「会員」、「非会員」、「店舗」 |
| 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; |
| } |
| ``` |
退会済みユーザー
2019/03/26 15:10 投稿
| bootstrap4でのトグルボタン背景色の変更 |
| 皆様、いつもお世話になります。 |
| ### 質問 |
| トグルボタンが３つあって、押した時、及び、カーソルがボタン上に乗った時の |
| 色を変更したいのですが |
| 色々調べましたが該当する情報を得る事が出来ませんでした。 |
| 良いお知恵をお貸しできないものでしょうか？ |
| ### したい事 |
| トグルボタンが３つあります。 |
| 「会員」、「非会員」、「店舗」 |
| 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 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" |
| <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" |
| <label class="btn btn-outline-danger btn-sm"> |
| <input type="radio" name="options" id="option3" autocomplete="off">店舗 |
| </label> |
| </div> |
| </body> |
| </html> |
| ``` |
| 手短ではありますがよろしくお願いいたします。 |
