🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1094閲覧

select optionタグの文字色変更について

Taka.K1009

総合スコア17

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/12/06 12:58

編集2019/12/06 13:18

selectタグ内のoptionタグで囲まれた文字(選択肢)の文字色が変更できません。

私が書いたコードは以下です。

html

1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 6 <link rel="stylesheet" type="text/css" href="index.css"> 7 8</head> 9<body> 10 11 <div class="main-contents-adress"> 12 13 <div class="main-contents-adress1"> 14 15 <p class="font-weight-bold">現住所(都道府県)</p> 16 17 <div class="required"> 18 19 <p>必須</p> 20 21 </div> 22 23 </div> 24 25 <div class="main-contents-adress2"> 26 27 <select name=""> 28 29 <option value="" selected>都道府県</option> 30 31 <option value="" disabled class="main-contents-adress2-disabled-color-adjust">北海道/東北</option> 32 33<option value="1">北海道</option> 34<option value="2">青森県</option> 35<option value="3">岩手県</option> 36<option value="4">宮城県</option> 37<option value="5">秋田県</option> 38<option value="6">山形県</option> 39<option value="7">福島県</option> 40<option value="8">茨城県</option> 41<option value="9">栃木県</option> 42<option value="10">群馬県</option> 43<option value="11">埼玉県</option> 44<option value="12">千葉県</option> 45<option value="13">東京都</option> 46<option value="14">神奈川県</option> 47<option value="15">新潟県</option> 48<option value="16">富山県</option> 49<option value="17">石川県</option> 50<option value="18">福井県</option> 51<option value="19">山梨県</option> 52<option value="20">長野県</option> 53<option value="21">岐阜県</option> 54<option value="22">静岡県</option> 55<option value="23">愛知県</option> 56<option value="24">三重県</option> 57<option value="25">滋賀県</option> 58<option value="26">京都府</option> 59<option value="27">大阪府</option> 60<option value="28">兵庫県</option> 61<option value="29">奈良県</option> 62<option value="30">和歌山県</option> 63<option value="31">鳥取県</option> 64<option value="32">島根県</option> 65<option value="33">岡山県</option> 66<option value="34">広島県</option> 67<option value="35">山口県</option> 68<option value="36">徳島県</option> 69<option value="37">香川県</option> 70<option value="38">愛媛県</option> 71<option value="39">高知県</option> 72<option value="40">福岡県</option> 73<option value="41">佐賀県</option> 74<option value="42">長崎県</option> 75<option value="43">熊本県</option> 76<option value="44">大分県</option> 77<option value="45">宮崎県</option> 78<option value="46">鹿児島県</option> 79<option value="47">沖縄県</option> 80 81 </select> 82 83 <p class="main-contents-error"><span class="maru">!</span>&nbsp;&nbsp;必須項目です</p> 84 85 <div class="arrow-top"></div> 86 <div class="arrow-bottom"></div> 87 88 </div> 89 90 </div><!-- main-contents-adress --> 91 92</body> 93</html>

css

1.main-contents-adress1{ 2 width: 35%; 3 height: 87px; 4 display: flex; 5 justify-content: space-between; 6 border-top: 1px solid #EEEEEE; 7 border-right: 1px solid #EEEEEE; 8 border-bottom: 1px solid #EEEEEE; 9 padding-top: 25px; 10 padding-right: 30px; 11} 12 13.main-contents-adress2{ 14 width: 65%; 15 height: 87px; 16 border-top: 1px solid #EEEEEE; 17 border-bottom: 1px solid #EEEEEE; 18 padding-top: 17px; 19 padding-left: 30px; 20 position: relative; 21} 22 23.main-contents-adress2 select{ 24 background-color: #EEEEEE !important; 25 border: 1px solid #EEEEEE; 26 height: 35px; 27 width: 55%; 28 padding-top: 0px; 29 padding-left: 10px; 30 -webkit-appearance: none; 31 -moz-appearance: none; 32 appearance: none; 33} 34 35.main-contents-adress2 select option{ 36 height: 35px; 37 width: 100%; 38 padding-top: 5px; 39 padding-left: 10px; 40} 41 42.main-contents-adress2-disabled-color-adjust{ 43 color: blue !important; 44}

デザインが悪いのは申し訳ありません。
どのようにしたら、北海道/東北の部分の文字色を変更できるのでしょうか?

よろしくお願いいたします。

ブラウザ:Google Chrome,Safari
バージョン:最新(2019年12月6日現在)

を想定しています。

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

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

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

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

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

m.ts10806

2019/12/06 13:01

想定のブラウザとバージョンを記載してください。
Taka.K1009

2019/12/06 13:07

ブラウザ:Google Chrome,Safari バージョン:最新(2019年12月6日現在) を想定しています。
m.ts10806

2019/12/06 13:17

失礼 「追記」してください。 質問への追記修正依頼です
Taka.K1009

2019/12/08 06:02

ありがとうございます!
guest

回答1

0

ベストアンサー

基本的に文字色の変更は難しいようです。
"北海道/東北"の文字が灰色になっているのはdisabledに指定してあるからですが、そもそもセレクトできるものには東北、北海道以外の都道府県も含まれているようなので、optgroupタグを使った方がいいです。

投稿2019/12/07 05:39

taiyakix

総合スコア427

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

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

Taka.K1009

2019/12/08 06:02

ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問