フォームでselect option内の選択肢の文字色と改行操作

前提・実現したいこと

フォーム内の選択項目を作成しており、下記2点を実現させたいです。

①selectの要領で、選択項目の行の選択肢のうち、それぞれ部分的に文の途中から文字の色を変更したいです。
例：<option value="">ここに文章が入ります。<span>ここからは赤色の文字になります。</span></option>

②スマートフォンで表示をした際には、文字色が変わる箇所で改行したいです。

発生している問題・エラーメッセージ

<select>ではなく、ラジオボタンを使った方法で作成を進めてみましたが
labelで囲った以外のエリアをクリックしたときにクローズさせたり
他のselectのフォームと操作感を同じようにしたいのですが…いい方法はないでしょうか。

該当のソースコード

HTML
1              <div class="select--box">
2                <input type="radio" name="option">
3                  <span class="selectlabel">選択してください</span>
4                <label class="option">
5                  <input type="radio" name="option" value="りんご" checked>
6                  <span class="select--title">りんご<br class="sp"><span class="color">赤文字赤文字赤文字</span>
7                  </span>
8                </label>
9                <label class="option">
10                  <input type="radio" name="option" value="みかん">
11                  <span class="select--title">みかん<br class="sp"><span class="color">赤文字赤文字赤文字</span>
12                </label>
13              </div>

CSS
1.sp {display: none;}
2.select--box {
3  position: relative;
4  box-sizing: border-box;
5  display: block;
6  overflow: hidden;
7  width: 600px;
8  margin:12px 0;
9  color: #333;
10  border:1px solid #ccc;
11  font-size:16px;
12}
13.select--box .title {
14  position: relative;
15  display: block;
16  width: 100%;
17  height: 100%;
18  cursor: pointer;
19}
20.select--box {
21  position: relative;
22  display: block;
23  width: 100%;
24  height: 100%;
25  padding: 10px 0;
26  cursor: pointer;
27}
28.select--box {
29  padding:0;
30  width: 600px;
31}
32.selectlabel {
33  position: relative;
34  display: block;
35  width: 600px;
36  padding:10px 38px 10px 19px;
37  cursor: pointer;
38}
39.select--box > input {
40  position: absolute;
41  z-index: 1;
42  top: 0;
43  left: 0;
44  display: block;
45  width: 100%;
46  height: 100%;
47  cursor: pointer;
48  opacity: 0;
49}
50.select--box > input:checked div.options label.option .select--title {
51  display: none !important;
52}
53.select--box > input:not(:checked) {
54  z-index: 4;
55}
56.select--box > input:not(:checked) ~ label.option > span.select--title {
57  display: none;
58}
59.select--box > span.selectlabel {
60  position: relative;
61  z-index: 0;
62  display: inline-block;
63  color: #333;
64  border-top: 0;
65  width: 100%;
66}
67.select--box label.option {
68  z-index: 1;
69  display: block;
70  overflow: hidden;
71  transition: all 0.1s ease-out;
72  margin-bottom: 0;
73  padding: 0;
74}
75.select--box label.option span.select--title {
76  position: relative;
77  z-index: 2;
78  transition: 0s ease-out;
79  margin-bottom: 10px;
80}
81.select--box label.option span.select--title:hover {
82  color: #333;
83  background: #fff;
84}
85.select--box label.option input {
86  display: none;
87}
88.select--box label.option input:checked ~ span.select--title {
89  position: absolute;
90  z-index: 3;
91  top: 0;
92  display: block;
93  width: 100%;
94  color: inherit;
95  border-top: 0;
96  background: #fff;
97  box-shadow: none;
98}
99.select--box::before,
100.select--box label.option input:checked ~ span.select--title :before {
101  position: absolute;
102  top: 1em;
103  right: 0.9em;
104  width: 6px;
105  height: 6px;
106  padding: 0;
107  content: '';
108  border-bottom: 2px solid red;
109  border-right: 2px solid red;
110  transform: rotate(45deg);
111  pointer-events: none;
112}
113.select--title {
114  padding: 10px 0;
115}
116.color {
117  color: red;
118}

補足情報（FW/ツールのバージョンなど）

ラジオボタンを使った方法にはこだわっておりません。いい方法があれば変更したいと考えております。
selectの記述方法で①、②が実現できるならば、それが一番いいと思っています。何かいい方法があれば教えていただきたいです。

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

回答1件

ベストアンサー

JavaScript を使ったほうが簡単ということもあり得ます。悪しからず。
スマホで……はメディアクエリを調べてください。ここでは触れません。

HTML
1  <div class="select--box">
2    <ul>
3      <li><input type="radio" name="option" id="O0" value="" checked="checked" /><label for="O0">選択してください</label></li>
4      <li><input type="radio" name="option" id="O1" value="りんご" /><label for="O1">りんご<br class="sp" /><span class="color">赤文字赤文字赤文字</span></label></li>
5      <li><input type="radio" name="option" id="O2" value="みかん" /><label for="O2">みかん<br class="sp" /><span class="color">赤文字赤文字赤文字</span></label></li>
6    </ul>
7  </div>

CSS
1.select--box ul {
2  margin: 0;
3  padding: 0;
4  width: 600px;
5  list-style: none;
6  border: 1px ridge #666;
7}
8
9.select--box li {
10  position: relative;
11}
12
13.select--box li > * {
14  overflow: hidden;
15}
16
17.select--box label {
18  display: block;
19  width: 100%;
20  pointer-events: none;
21}
22
23.select--box input {
24  display: block;
25  position: absolute;
26  right: 0;
27  bottom: 0;
28  width: 100%;
29  height: 100%;
30  margin: 0;
31  opacity: 0;
32  cursor: pointer;
33  outline: none;
34}
35
36.select--box input:hover + label {
37  outline: blue solid 1px;
38}
39
40.select--box input:checked + label {
41  background: #fee;
42}
43
44.select--box:not(:focus-within) input:not(:checked) + label {
45  height: 0;
46}

https://developer.mozilla.org/ja/docs/Web/CSS/:focus-within

投稿2019/12/06 08:58

x_x

総合スコア13749

pondering

2019/12/09 01:49

ご回答いただき、ありがとうございます。 :focus-within という疑似要素、初めて知りました！これからさらに詳しく調べたいと思います。しかし、Edgeに対応していないようで、今回は使えそうにありません…。 ①.select--box以外のエリアをクリックしたら選択肢の部分はclose ②選択肢の部分が開いているときは、選択肢のどれを選択してもclose 【選択してください】などの初期値のようなエリアが押されても、　closeさせたいです。上記のようにしたいのですがこのような場合はJavaScriptではないと難しいのでしょうか。重ね重ねすみません。