質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

Bootstrap

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

Q&A

解決済

3回答

5966閲覧

bootstrap4でのトグルボタン背景色の変更

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

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

Bootstrap

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

0グッド

0クリップ

投稿2019/03/26 06:08

編集2019/03/26 06:47

皆様、いつもお世話になります。

質問

トグルボタンが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; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/03/26 06:11

dangerは使わないということでしょうか。
退会済みユーザー

退会済みユーザー

2019/03/26 06:14

dangerも含めて、他の色#000000~#ffffff迄の色に変更したいと思っています。
退会済みユーザー

退会済みユーザー

2019/03/26 06:20

お客様のご意向によりマゼンダ色にして欲しいとの事です。
bamboo-nova

2019/03/26 06:22

CSSのhoverで色を変更するのではダメなのでしょうか。
kei344

2019/03/26 06:30

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
guest

回答3

0

今ひとつ要件が読めないのですが、もしBootStrapのテーマカラーではなく任意の色にしたい」というのでしたら、できるパターンは2通り。

  • 既存のクラスを修正する
  • 既存のクラスをコピーして同じような機能を持ったクラスを用意し、好きな色に変更して作ったクラスを適用させる

他への影響からして私なら2番目を選びますね。
あとは頑張ってください。

※「お客様の意向で」とのことで、お仕事ですよね。
そのまま回答はできません。ここは質問サイトです。

投稿2019/03/26 06:26

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/03/26 06:38

解らないのであれば回答しないでください。ベストアンサーの点稼ぎの為の質問ではありません。あしからず失礼しました。
m.ts10806

2019/03/26 06:43 編集

何を根拠に「分からないなら」と指摘されているのか全く分かりませんが、 分かっているから回答してます。 この回答内容でピンとこないなら、あなたは仕事として請け負う技術力を持ち合わせていません。 フレームワークのデフォルト色を調整するなど仕事で請け負う立場であれば造作もないこと。それをわざわざ質問していることを恥じてください。お客様にも謝罪された方が良いですね。「私では分かりません」って。 それに過去質問でこの手のものは出ています。(私も以前回答したことがあります)探し方を改めてください。
退会済みユーザー

退会済みユーザー

2019/03/26 06:56

ここはそんな上記の様な論議を繰り広げる場所なのでしょうか?技術不足だとは認識してはいます。その上で解らないので質問をしている。ただそれだけなのですが。 ここは質問コーナーです。お客様に謝罪する事を前提を議論する場所ではないとは思うのですがいかがですか?
m.ts10806

2019/03/26 07:01

「自分の仕事をかわりに無料で質問サイトでやってもらうのはありなのか」 という是非は問いたいですね。作業依頼のサイトではないです。 「課題である」「仕事である」分かった時点で質問サイトとしての使い方ではなくなります。どうせやるならもっとうまくやってください。 それに解決のためのヒントも出しました。過去質問にもあると。 あとは自分でなんとかしてください。だって自分の仕事でしょ? そりゃ「客は物ができれば手段を問わない」のはありますが、teratailの使い方を間違っているなら話は別です。 私の手元ではできているものがありますが、それを出すことであなたの報酬になるのはおかしい話なので出さない。それだけの話です。
退会済みユーザー

退会済みユーザー

2019/03/26 07:03

長文有難うございました。
退会済みユーザー

退会済みユーザー

2019/03/26 07:06

簡潔にしてくださいね。
m.ts10806

2019/03/26 07:08

この程度理解できずに仕事してるのが信じられません。 仕方ないですね。要約してあげます。 「teratailの使い方間違ってます。作業依頼になっています。非推奨です。」 仕事で請け負うのに無料の質問サイトに丸投げっておかしいですよね。
退会済みユーザー

退会済みユーザー

2019/03/26 07:26

もう、答えなくていいですよという意味合を含んであげたのですが、あなたは相当構って欲しい方なのですか?暇なのですね。
m.ts10806

2019/03/26 07:33 編集

私であればこんな質問せずに問題に集中します。分かれば5分程度で終わる問題。質問してる方が暇。 というか、自分の力が不足しているのが分かっているのなら請け負いません。 何をどう見てそう判断されたのか不明な発言が多すぎます。 論理的に説明できないなら発言されない方が良いです。あなたの頭と対応の悪さ、マズさがどんどん滲み出るだけです。
退会済みユーザー

退会済みユーザー

2019/03/26 07:50

私は回答ポップアップがある度にここを見ているだけです。貴方が誘導(煽る)させているだけでは?
m.ts10806

2019/03/26 07:56

はーそうですか・・・。そう言いますか・・・。 「論理的に説明できないなら発言されない方が良いです」と注意したばかりなのに。 どれも根拠ないじゃないですか。あるなら説明してくださいな。 「そんな暇ない」と逃げるんでしょうけど、それなら回答きちんと読み解くか、自身の問題にのみ集中するべき。妄想働かせる余裕あるなら問題の解決にのみ力を注ぐべき。 一番初めに「分からないなら回答するな」と盛大に煽っておきながら自分のことを棚にあげてどうしたいんですか。
退会済みユーザー

退会済みユーザー

2019/03/26 08:04

もう、本当に勘弁してください。何も以降答えないでください。POPUPがある度にため息がでます。
m.ts10806

2019/03/26 08:12 編集

回答のたびにこのような反応されるのであれば誰もあなたを助けなくなります。 それに誰もあなた程度の人に構ってもらいたいなんて思ってませんよ。思い上がりもいい加減にしてください。根拠を述べられないなら適当にコメントしないでください。自身の問題を棚に上げたまま勝手に切り上げないでください。 質問を振ったのは他でもないあなた自身。煽り始めもあなた自身。それすらも分かりませんか? 自分で出来ないなら別の業者に依頼されてはどうでしょうか。それが賢明です。あなたのやり方はお客様に失礼です。
退会済みユーザー

退会済みユーザー

2019/03/26 09:35

勝手な妄想をして煽っているのは貴方の方ではないでしょうか?お客様をエンドユーザーと勘違いされていませんか?お客様と書いたのはあくまで例えの話です。 この事が事の発端ですよ
m.ts10806

2019/03/26 09:48

すごーい 「お客様のご意向によりマゼンダ色にして欲しいとの事です。 」 これを読んで「例え話だ」と認識できるエスパーに出会ったことないですね。しかも私は最初から「仕事ですよね」と書いてるのにここまで否定せずにここにきていきなり「例えの話」と後出しにも程がありますね。 で、出来たんですか?出来ないんですか?無反応貫いてらっしゃる別の回答と併せれば、ちょっとCSSがわかれば解決可能なヒントは出揃ってますよ。 それともこの状況でコピペ回答が出るまで待つつもりですか?
退会済みユーザー

退会済みユーザー

2019/03/26 11:20

「すごーい」は此方が返します。 本当にお暇なんですね。 流石月間スコア2位の方は筆の書き方も一流なんですね。 そうやって回答者を煽り回して謝罪させフォロワー増やすんですねー。ほんとにすごーい。
m.ts10806

2019/03/26 11:22

で、出来たんですか?出来ないんですか?無反応貫いてらっしゃる別の回答と併せれば、ちょっとCSSがわかれば解決可能なヒントは出揃ってますよ。 それともこの状況でコピペ回答が出るまで待つつもりですか?
guest

0

ベストアンサー

【:hover - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:hover

投稿2019/03/26 07:09

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/03/26 13:24

hoverを使った別視点で考えなおし、bootstrapの採用は見送りました。 スタイルシートを多用した作りにここの箇所だけ変更しました。 お手数かけました。
guest

0

bootstrapはこのシステム全体で使っているのでここを見る方の参照になるかは
わかりませんがスタイルシートを多用した作りに変更してみました。
ここを参考にしました。

boostrapにこだわらず
別視点で最初から見ていれば良かったなと反省しております。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> input[type=radio] { display: none; /* ラジオボタンを非表示にする */ } input[type="radio"]:checked + label { background: #e4007f; /* マウス選択時の背景色を指定する */ color: #ffffff; /* マウス選択時のフォント色を指定する */ border: 2px solid #660066; /*マウス選択時の ボックスの境界線を実線で指定する */ } .label:hover { background-color: #e388ba; /* マウスオーバー時の背景色を指定する */ border: 2px solid #660066; /* マウスオーバー時のボックスの境界線を実線で指定する */ } .label { display: block; /* ブロックレベル要素化する */ float: left; /* 要素の左寄せ・回り込を指定する */ margin: 5px; /* ボックス外側の余白を指定する */ width: 100px; /* ボックスの横幅を指定する */ height: 45px; /* ボックスの高さを指定する */ padding-left: 5px; /* ボックス内左側の余白を指定する */ padding-right: 5px; /* ボックス内御右側の余白を指定する */ color: #123300; /* フォントの色を指定 */ text-align: center; /* テキストのセンタリングを指定する */ line-height: 45px; /* 行の高さを指定する */ cursor: pointer; /* マウスカーソルの形(リンクカーソル)を指定する */ border: 2px solid #339900; /* ボックスの境界線を実線で指定する */ border-radius: 5px; /* 角丸を指定する */ background-color:#44cc00; } </style> </head> <body> <input type="radio" name="fruits" value="1" id="apple"> <label for="apple" class="label">会員</label> <input type="radio" name="fruits" value="2" id="pineapple"> <label for="pineapple" class="label">非会員</label> <input type="radio" name="fruits" value="2" id="orange"> <label for="orange" class="label">店舗</label> </body> </html>

投稿2019/03/26 13:35

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問