css - 制作一个带有完整背景区域的 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；因为它覆盖了 background-size: 36px 36px;然后删除 background-origin: content-box;这将使您的方形背景大小合适。

要去除方形背景周围的细线，只需添加 border: none;在选择上

为了使人字形更小巧，您需要使用 sketch 或任何其他能够执行此操作的软件来编辑 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>