質問編集履歴

2 実施した事を追加しました

退会済みユーザー

退会済みユーザー

2019/03/26 15:47  投稿

bootstrap4でのトグルボタン背景色の変更
皆様、いつもお世話になります。
### 質問
トグルボタンが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;
}
```
  • jQuery

    9340 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Bootstrap

    1552 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

1 不要なコードを削除しました。

退会済みユーザー

退会済みユーザー

2019/03/26 15:10  投稿

bootstrap4でのトグルボタン背景色の変更
皆様、いつもお世話になります。
### 質問
トグルボタンが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" onClick="checkMember0()">
                   <input type="radio" name="options" id="option1" autocomplete="off" style="width: 200px">会員
             <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" onClick="checkMember1()">
             <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" onClick="checkMember2()">
             <label class="btn btn-outline-danger btn-sm">
                   <input type="radio" name="options" id="option3" autocomplete="off">店舗
             </label>
       </div>
   </body>
</html>
```
手短ではありますがよろしくお願いいたします。
  • jQuery

    9340 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Bootstrap

    1552 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る