border-radius無法在MacOS中工作/ -webkit-

我在表格輸入上四捨五入，發現border-radius不適用於<select>。它適用於所有其他輸入字段，但不適用於選擇下拉菜單。當我抓住我的Macbook Pro時，我注意到了這一點，但我不記得在Windows機器上看到這個問題。這是一個OSX /瀏覽器的問題？border-radius無法在MacOS中工作/ -webkit-

我做了一個codepen在我的環境之外進行測試，果然！它也不在那裏工作！

看一看在codepen

HTML：

<select class="form-control"> 
    <option value="">Select User</option> 
</select> 
<input type="text" class="form-control">

CSS：

.form-control{ 
    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    -ms-border-radius: 50px; 
    border-radius: 50px; 
    border: 2px solid #bbb; 
}

如果是Mac OS /瀏覽器組合的問題，有沒有解決方法呢？

UPDATE：

Safari瀏覽器是好的，但不是Chrome或Safari

來源

2017-02-19 LOTUSMS

我想你可能需要包裝它。看到這篇文章：http://stackoverflow.com/questions/19444347/how-to-make-select-dropdown-with-rounded-border具體的第三個答案鏈接到這個小提琴：https：//jsfiddle.net/webx/2g5bydyo/ – j3py

Select元素非常難以設計，特別針對每個平臺/瀏覽器。有些人更喜歡使用另一種標記來構建下拉列表，並使用JS處理它以同步到傳統的表單控件。 –

Here's an example jsfiddle利用this post您的代碼和第三個答案：

<div class="form-control"> 
    <div class="form-control rounded"> 
    <select class="form-select"> 
     <option value="">Select User</option> 
    </select> 
    </div> 
    <div class="form-control"> 
    <input type="text" class="rounded"> 
    </div> 
</div>

的CSS：

.form-control { 
    display:inline; 
    overflow:hidden; 
} 

.form-select { 
    border:0px; 
    outline:none; 
} 

.rounded { 
    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    -ms-border-radius: 50px; 
    border-radius: 50px; 
    border: 2px solid #bbb; 
}

來源

2017-02-19 03:30:27 j3py

偉大的工作j3py！經過一些更多的造型，它完美解決。很好的解決方法。 – LOTUSMS

很高興聽到它！ – j3py

border-radius無法在MacOS中工作/ -webkit-

回答

相關問題