6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

HTML `<option>` タグの背景色を変更したのだけど、選択時の色がまったく変わらなくて、調べまくった結果、グラデーション指定なら効くという「はぁ?」な事態に遭遇したのでメモる

Last updated at Posted at 2021-04-05

HTML <option> タグの背景色backgroundを変更したのだけど、選択時の色がまったく変わらなくて、調べまくった結果、グラデーションの指定 linear-gradient() なら効くという「はぁ?」な事態に遭遇したのでメモる

こんな感じ
red を指定しているのに、グレーのまま変わらない。

image.png

確認用コード

<style>
select option {
  background: blue;
}

select.A option:checked {
  background: red;
}
select.B option:checked {
  background: linear-gradient(red, red);
}
</style>
普通の色指定 'red' が効かなくて、
グラデーションの指定 linear-gradient(red, red) なら効くって、、、
明らかにバグっているよね<br>
<select class="A" size="5" style="width: 10em;">
  <option >aaa</option>
  <option >bbb</option>
  <option selected>ccc</option>
  <option >ddd</option>
  <option >eee</option>
</select>
<select class="B" size="5" style="width: 10em;">
  <option >aaa</option>
  <option >bbb</option>
  <option selected>ccc</option>
  <option >ddd</option>
  <option >eee</option>
</select>

Codepen の実行結果

修正希望です。>関係者様

linear-gradient の詳細はこちら

ちなみに、動作を確認した Chrome のバージョンは(2021-04-06の時点で最新)
image.png

2022-12-14 追記(えっ?!なおってる??)

赤く表示されてますね。修正をありがとうございました!!!!
image.png

6
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?