Safari rendering different border width bug - html

Question

Ok, so here is the problem: I wanted to create a select+button element and everything went good, apart from one thing.
For some reason a border for "select" and a border for "a" tags are rendering in a different way. And though its a tiny detail, that you may not notice if you do not zoom, it irritates me a lot.
There is no such a problem at Chrome and Firefox, but it is visible in Safari. My guess is that I might have forgotten to override some rooted "select" styles for Safari but my experiments didn't succeed.
Would be glad for your help!
Fiddle
Example Photo
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 is at the Fiddle

Answer 1

the best bet at creating a dropdown that looks the same on all browsers is in fact not to use a . if you can change the html and add js to your project it can be achieved with a ul or 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>
if you have questions to the concept of this, ask away