【HTML/CSS】セレクトボックスの逆三角マークが背景に上書きされる

セレクトボックスにbackground-imageを使って逆三角マークを付けております。
jQueryを用いてフォームの背景を変更すると逆三角マークが背景に上書きされてしまいます。

こちらフォームの背景を変更してもマークが上書きされないようにするにはどうすればよいでしょうか。
解決策をご教示いただけますと幸いです。

[コード]

<select class="required" >
  <option value="" selected="">選択</option>
  <option value="">TEST</option>
  <option value="">TEST</option>
  <option value="">TEST</option>
</select>

select {
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
    background-position: calc(100% - 2rem) calc(50% + 0.2px), calc(100% - 1.5rem) calc(50% + 0.2px);
    border-radius: 3px;
    background-repeat: no-repeat;
    background-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px #555;
    padding-left: 0.8rem;
    white-space: nowrap;
}

$(function () {
  $("select.required").on("blur", function () {
    if ($(this).prop("selectedIndex") === 0) {
      $(this).css({
        "background": "white"
      });
    } else {
      $(this).css({
        "background": "#ccccf1"
      });
    }
  })
});

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

回答1件

ベストアンサー

backgroundは一括指定プロパティなので、それで色を設定すると、background-image や background-position などを上書きしてしまいます。background-colorプロパティで色を指定すれば他のプロパティを上書きしません。

jQuery
1$(function () {
2  $("select.required").on("blur", function () {
3    if ($(this).prop("selectedIndex") === 0) {
4      $(this).css({
5        "background-color": "white"
6      });
7    } else {
8      $(this).css({
9        "background-color": "#ccccf1"
10      });
11    }
12  })
13});