给出一个选择与输入相同的轮廓样式

Question

我的要求是选择元素具有尖锐的边缘，就像我在代码中用标记和CSS所做的那样。

问题是我希望选择具有与输入时相同的样式，当他们有焦点时。

输入具有边框和轮廓。

我可以得到与选择相同的效果，但当他们有焦点时，边框被舍入，因为我不能使用轮廓两次。

有没有办法解决这个问题？

div { 
 
    margin: 10px 0; 
 
} 
 

 
input[type="text"] { 
 
    border: 1px solid #727272; 
 
} 
 

 
input[type="text"]:focus { 
 
    border: 2px solid #0065bd; 
 
    outline: 3px solid #ffbf47; 
 
    outline-offset: 0; 
 
} 
 

 
select { 
 
    outline: 1px solid #727272; 
 
} 
 

 
select:focus { 
 
    border: 2px solid #0065bd; 
 
    outline: 3px solid #ffbf47; 
 
    outline-offset: 0; 
 
}

<div> 
 
    <input type="text" /> 
 
</div> 
 
<div> 
 
    <select> 
 
    <option>One</option> 
 
    <option>Two</option> 
 
    </select> 
 
</div>

Answer 1

试试这个：

select {  
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
} 

Answer 2

FWIW，没有得到版本62.0.3202.62（正式版本）（64位），四舍五入。