Question

我希望在所有浏览器的select元素右侧都有自己的箭头图标。我试图使用伪元素：之后但它不起作用。＆＃13; ＆＃13; 选择{＆＃13; 位置：相对;＆＃13; 外观：无;＆＃13; -webkit-appearance：none;＆＃13; -moz-appearance：none;＆＃13; ＆amp;：{＆＃13; 内容：＆＃39; f175＆＃39;;＆＃13; font-size：12px;＆＃13; 位置：绝对;＆＃13; z-index：999;＆＃13; 顶部：0px;＆＃13; 右：13px;＆＃13; }＆＃13; }＆＃13; ＆lt; select name =＆＃34;＆＃34;大小=＆＃34; 1＆＃34;＆GT;＆＃13; ＆lt; option value =＆＃34; wybierz z listy＆＃34;＆gt; wybierz z listy＆lt; / option＆gt;＆＃13; ＆lt; option value =＆＃34; Normal＆＃34;＆gt; Normal＆lt; / option＆gt;＆＃13; ＆lt; option value =＆＃34; High＆＃34;＆gt; High＆lt; / option＆gt;＆＃13; ＆lt; option value =＆＃34; Emergency＆＃34;＆gt; Emergency＆lt; / option＆gt;＆＃13; ＆LT; /选择＆GT;＆＃13; ＆＃13; ＆＃13;

Answer 1

试试这个：

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-right: 2rem;
  padding: 1rem;
  padding-right: 2rem;
}

<select name="" size="1">
  <option value="wybierz z listy">wybierz z listy</option>
  <option value="Normal">Normal</option>
  <option value="High">High</option>
  <option value="Emergency">Emergency</option>
</select>

Answer 2

只需从您的CSS中删除以下样式即可使用

-webkit-appearance: none;
-moz-appearance: none;

Answer 3

您可以使用以下图片

＆＃13;

select {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 5px;
  width: 120px;
  background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
}

＆＃13;

<select name="" size="1">
  <option value="wybierz z listy">wybierz z listy</option>
  <option value="Normal">Normal</option>
  <option value="High">High</option>
  <option value="Emergency">Emergency</option>
</select>

＆＃13;

如何使用我自己的箭头图标制作<select>元素？

3 个答案: