Ошибка рендеринга в Safari с разной шириной границы

Question

Хорошо, вот в чем проблема: я хотел создать элемент select + button, и все прошло хорошо, кроме одной вещи.

По какой-то причине граница для "select" и граница для "a" визуализируются по-другому.И хотя это крошечная деталь, которую вы можете не заметить, если не увеличите масштаб, она меня сильно раздражает.

В Chrome и Firefox такой проблемы нет, но она видна в Safari.Я предполагаю, что я мог забыть переопределить некоторые корневые стили «выбора» для Safari, но мои эксперименты не увенчались успехом.

Буду рад вашей помощи!

Fiddle Пример фотографии

HTML:

<li class="category-product-buttons">
  <select style="color: rgb(38, 38, 38);">
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
  </select>
  <a class="button-anim" type="button" href="">Buy</a>
</li>

CSS у скрипки

Answer 1

Лучшая ставка при создании выпадающего меню, которое выглядит одинаково во всех браузерах, на самом деле - не использовать a.если вы можете изменить html и добавить js в ваш проект, это может быть достигнуто с помощью ul или divs

$(document).ready(function(){
  $('.custom-select__field').on('click', function(){
    $('.custom-select__list').toggle();
  });
  
  $('.custom-select__list li').on('click', function(){
    $('.select-value').val($(this).data('value'));
    $('.custom-select__list').toggle();
  });
});

/* reseting ul styles */

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}


/* styling dropdown */

.custom-select {
  width: 200px;
  height: 40px;
  line-height: 40px;
  border: 2px solid red;
}

.custom-select__field {
  padding: 0 10px;
  background: rgba(255, 0, 0, .2);
  cursor: pointer;
}

.custom-select__list {
  display:none;
}

.custom-select__list li {
  padding: 0 10px;
  background:rgba(125,125,0,.2);
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Only showing this field as text for demonstration, you can hide it with type="hidden"<br>
<br>
<input class="select-value" name="select-value" type="text">
<br>
You can change the style and everything as you need it.<br><br>

<div class="custom-select">
  <div class="custom-select__field">Select one</div>
  <ul class="custom-select__list">
    <li data-value="1">1</li>
    <li data-value="2">2</li>
    <li data-value="3">3</li>
    <li data-value="4">4</li>
  </ul>
</div>

Если у вас есть вопросы по поводу концепции этого вопроса, задайте вопрос