使HTML选择箭头具有完整的背景区域

Question

我正在尝试调整Zurb Foundation的框，使其具有更好的下拉箭头。我希望这样的雪佛龙背景像是方形的：

我已经有了以下代码：

body {
  background-color: #424242;
  font-family: Verdana, Arial;
}

select {
      background-color: #424242;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 550'><rect width='100%' height='100%' fill='red'/><path d='M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z' style='fill:white'/></svg>");
      background-size: 36px 36px;
      color: white;
      border: solid 1px orange;
    }
    
/* original select code from Zurb Foundation, copied from Inpector */
select {
  height: 2.03125rem;
    margin: 0 0 0.83333rem;
    padding: 0.41667rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #cacaca;
    border-radius: 0;
    background-color: #fefefe;
    font-family: inherit;
    font-size: 0.83333rem;
    font-weight: normal;
    line-height: 1.5;
    color: #090000;
    background-origin: content-box;
    background-position: right -0.83333rem center;
    background-repeat: no-repeat;
    background-size: 9px 6px;
    padding-right: 1.25rem;
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
    box-sizing: border-box;
    width: 100%;
}

<select>
  <option>Imma one</option>
  <option>Imma two</option>
  <option>Imma three</option>
</select>

我正在努力使背景形状达到完整尺寸，并使人字形比尺寸小一些。 我究竟做错了什么？感谢您的帮助！

Answer 1

首先删除背景大小：9px 6px;因为它会覆盖背景尺寸：36px 36px; 然后删除background-origin：content-box; 这将使平方的背景正确大小。

要消除方形背景周围的细线，只需添加边框：none;在选择上

要使人字形更小巧，您需要使用素描或其他任何具有此功能的软件来编辑svg代码。

在以下示例中，我为您更改了svg。

body {
  background-color: #424242;
  font-family: Verdana, Arial;
}

select {
      background-color: #424242;
      background-image: url("data:image/svg+xml;utf8,<svg width='550' height='550' xmlns='http://www.w3.org/2000/svg'><g fill='none' fill-rule='evenodd'><path fill='red' d='M0 0h550v550H0z'/><path d='M494.488 164.614l-7.097-7.093a12.013 12.013 0 0 0-16.995 0L275.056 352.82 79.616 157.52a12.013 12.013 0 0 0-16.994 0l-7.098 7.093a11.992 11.992 0 0 0 0 16.982L266.459 392.48a12.013 12.013 0 0 0 16.995 0l210.935-210.883a11.904 11.904 0 0 0 .1-16.982z' fill='#FFF'/></g></svg>");
      background-size: 36px 36px;
      color: white;
      //border: solid 1px orange;
    }
    
/* original select code from Zurb Foundation, copied from Inpector */
select {
  height: 2.03125rem;
    margin: 0 0 0.83333rem;
    padding: 0.41667rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    //border: 1px solid #cacaca;
    border-radius: 0;
    background-color: #fefefe;
    font-family: inherit;
    font-size: 0.83333rem;
    font-weight: normal;
    line-height: 1.5;
    color: #090000;
    //background-origin: content-box;
    background-position: right -0.83333rem center;
    background-repeat: no-repeat;
    //background-size: 9px 6px;
    padding-right: 1.25rem;
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
    box-sizing: border-box;
    width: 100%;
    border: none;
}

<select>
  <option>Imma one</option>
  <option>Imma two</option>
  <option>Imma three</option>
</select>