无法将背景图像属性设置为 none

Question

我正在使用一个名为 Chosen 的 jQuery 插件。

每个选中的都有一个关闭按钮，如下面的代码片段所示。我想更改关闭按钮的颜色，但在浏览了它的 CSS 属性之后，我发现它无法完成，因为插件使用了 background-image 属性。

如上图所示，它有一个属性 background-image: 'chosen-sprite@2x.png';.

现在我想使用 CSS 自定义 background-image 属性但它不起作用。

我尝试了 background-image: none !important;、background-image: url('https://img.icons8.com/search') !important; 和 background: none !important;，但没有成功。

$(document).ready(function() {
  $('.chosen-select').chosen({
    width: '100%'
  });
});

a.search-choice-close {
  background-image: none !important;
}

<!DOCTYPE html>
<html>
<body>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
  <select data-placeholder="Choose a Country..." class="chosen-select" multiple tabindex="4">
    <option value=""></option>
    <option value="United States" selected>United States</option>
    <option value="United Kingdom" selected>United Kingdom</option>
    <option value="Belarus">Belarus</option>
  </select>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
</html>

Answer 1

而不是使用下面的代码：

a.search-choice-close {
  background-image: none !important;
}

我发现 jQuery Chosen 使用 CSS 媒体查询检测屏幕的 DPI。

所以修复是：

a.search-choice-close {
  background-image: none !important;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
  .chosen-container-multi .chosen-choices .search-choice .search-choice-close {
    background-image: none !important;
  }
}

在某些情况下覆盖基本 CSS 是不够的。

无法将背景图像属性设置为 none

Can't set background-image property to none

css

jquery

jquery-chosen

无法将背景图像 属性 设置为 none

Can't set background-image property to none

css

jquery

jquery-chosen

无法将背景图像属性设置为 none