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;
}

m.ts10806

2019/03/26 06:11

dangerは使わないということでしょうか。

退会済みユーザー

2019/03/26 06:14

dangerも含めて、他の色#000000~#ffffff迄の色に変更したいと思っています。

m.ts10806

2019/03/26 06:15

どのように調べたのか書かれていないので分かりませんが、ドキュメントにあるものでは何が足りませんか？ https://getbootstrap.com/docs/4.3/components/buttons/#outline-buttons

退会済みユーザー

2019/03/26 06:20

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

bamboo-nova

2019/03/26 06:22

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

kei344

2019/03/26 06:30

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

行動規範の内容に同意します

回答3件

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

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

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

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

投稿2019/03/26 06:26

m.ts10806

総合スコア80890

退会済みユーザー

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 編集

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

退会済みユーザー

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がわかれば解決可能なヒントは出揃ってますよ。それともこの状況でコピペ回答が出るまで待つつもりですか？

行動規範の内容に同意します

ベストアンサー

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

投稿2019/03/26 07:09

kei344

総合スコア69643

退会済みユーザー

2019/03/26 13:24

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

行動規範の内容に同意します

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