使用 select::before 显示自定义 V 形以进行选择

问题描述 投票：0回答：1

我正在尝试将 V 形图标更改为 SVG 并使其适应深色主题。 为此，我尝试将 V 形图案设置为单独的元素 (::before) 的背景图像，并对其应用反转滤镜。

function toggle() {
  document.body.classList.toggle('dark-theme');
}
:root {
 --fill-color-background: #F3F3F3;
 --fill-color-text-primary: #000000E4;
 --fill-color-control-default: #FFFFFFB2;
 --fill-color-control-border: #0000000F;
}

.dark-theme {
  --fill-color-background: #202020;
  --fill-color-text-primary: #FFFFFF;
  --fill-color-control-default: #FFFFFF0F;
  --fill-color-control-border: #FFFFFF12;
}

body {
  background: var(--fill-color-background);
}

select, button {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 6rem;
  min-height: 0.0625rem;
  padding: 0.3125rem 0.75rem 0.4375rem 0.75rem;
  color: var(--fill-color-text-primary);
  background: var(--fill-color-control-default);
  border: 1px var(--fill-color-control-border) solid;
  border-radius: 0.1875rem;
  overflow: hidden; /* Don't show excess chars */
  white-space: nowrap; /* Force single line */
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;

  &.static {
    background-image: url('data:image/svg+xml;utf8,<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M-0.00195312 1.5C-0.00195312 1.42969 0.0117188 1.36523 0.0390625 1.30664C0.0664062 1.24414 0.101562 1.19141 0.144531 1.14844C0.191406 1.10156 0.244141 1.06445 0.302734 1.03711C0.365234 1.00977 0.431641 0.996094 0.501953 0.996094C0.576172 0.996094 0.640625 1.00977 0.695312 1.03711C0.75 1.06055 0.802734 1.09766 0.853516 1.14844L4 4.29492L7.14648 1.14844C7.24805 1.04688 7.36523 0.996094 7.49805 0.996094C7.56836 0.996094 7.63281 1.00977 7.69141 1.03711C7.75391 1.06445 7.80664 1.10156 7.84961 1.14844C7.89648 1.19141 7.93359 1.24414 7.96094 1.30664C7.98828 1.36523 8.00195 1.42969 8.00195 1.5C8.00195 1.63672 7.95312 1.75391 7.85547 1.85156L4.35156 5.35547C4.25391 5.45312 4.13672 5.50195 4 5.50195C3.86328 5.50195 3.74609 5.45312 3.64844 5.35547L0.144531 1.85156C0.046875 1.75391 -0.00195312 1.63672 -0.00195312 1.5Z" fill="black" fill-opacity="0.6063"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 8px 6px;
  }
}

select:not(.static)::before {
  content: '';
  display: block;
  position: absolute;
  top: 5px;
  right: 10px;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M-0.00195312 1.5C-0.00195312 1.42969 0.0117188 1.36523 0.0390625 1.30664C0.0664062 1.24414 0.101562 1.19141 0.144531 1.14844C0.191406 1.10156 0.244141 1.06445 0.302734 1.03711C0.365234 1.00977 0.431641 0.996094 0.501953 0.996094C0.576172 0.996094 0.640625 1.00977 0.695312 1.03711C0.75 1.06055 0.802734 1.09766 0.853516 1.14844L4 4.29492L7.14648 1.14844C7.24805 1.04688 7.36523 0.996094 7.49805 0.996094C7.56836 0.996094 7.63281 1.00977 7.69141 1.03711C7.75391 1.06445 7.80664 1.10156 7.84961 1.14844C7.89648 1.19141 7.93359 1.24414 7.96094 1.30664C7.98828 1.36523 8.00195 1.42969 8.00195 1.5C8.00195 1.63672 7.95312 1.75391 7.85547 1.85156L4.35156 5.35547C4.25391 5.45312 4.13672 5.50195 4 5.50195C3.86328 5.50195 3.74609 5.45312 3.64844 5.35547L0.144531 1.85156C0.046875 1.75391 -0.00195312 1.63672 -0.00195312 1.5Z" fill="black" fill-opacity="0.6063"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 8px 6px;
}

.dark-theme select::before {
  filter: invert(); /* Adjusts the SVG color */
}
<html>
  <body class="dark-theme">
    <div>
      <select tabindex="1">
        <option>First</option>
      </select>

      <select class="static" tabindex="1">
        <option>Second</option>
      </select>

      <button type="button" onclick="toggle()">
        Toggle Theme
      </button>
    </div>
  </body>
</html>

如您所见，第二个选择（带有静态 V 形）正在按预期工作。 所以看起来 

select::before
规则有问题。 忽略 
:not(.static)
修饰符，因为在我的测试中我没有使用它。

我可以简单地拥有两个不同颜色的 SVG，但我宁愿先尝试使用 filter() 。

更新了

我使用的是字体图标，它适用于 

button
但不适用于 
select
元素：

select, button {
  position: relative;
}

select::before, button::before {
  content: '\e006';
  font-size: 20px;
  font-family: icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  position: absolute;
  top: auto;
  right: 0;
}
html css css-selectors
1个回答
0
投票

由于您的问题已经从主题策略转变为元素怪癖，因此 

select
元素显然缺乏自定义友好性。当我必须专门使用 
select
元素时，我只是做这样的事情。

注意，我们只是用包装元素给出幻觉，而不是与理智作斗争：D

使用 FontAwesome 作为示例，但同样适用于您的实例。

.the-container {
  position: relative;
  display: inline-block;
  padding: 3px 6px;
  background-color: #ddd;
  border-radius: 10px;
  cursor: pointer;
  border: #ddd 2px solid;
}

.the-container:after {
  content: '\2b';
  display: block;
  font-size: 1rem;
  font-family: 'Font Awesome 6 Free';
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  pointer-events: none;
}

.the-container:hover {
  color: green;
  border-color: green;
}

.the-container select {
  -moz-appearance:none; 
  -webkit-appearance:none;
  appearance: none;
  /*outline: none;*/
  border: none;
  background: none;
  color: inherit;
  padding-right: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>


<div class="the-container">
  <select>
    <option>ONE</option>
    <option>TWO</option>
    <option>THREE</option>
  </select>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.