給出一個選擇與輸入相同的輪廓樣式

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位），四捨五入。