Сделать стрелку выбора 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;Это сделает ваш квадратный фон нужного размера.

Чтобы избавиться от крошечных линий вокруг квадрата, просто добавьте border: none;на select

Чтобы сделать шеврон немного более миниатюрным, вам нужно отредактировать svg-код, используя sketch или любое другое программное обеспечение, способное на это.

Я изменил 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>