從Chrome/Webkit中的<select>元素中刪除圓角

105

Chrome的用戶代理樣式表爲<select>元素的所有角提供了5px的邊框半徑。我試圖通過我的外部樣式表應用半徑爲0px的方式來消除這種情況，以及內聯元素本身。我試過border-radius:0px和-webkit-border-radius:0px;，我試過更具體的border-top-left-radius:0px（以及它的-webkit等價物）。從Chrome/Webkit中的<select>元素中刪除圓角

沒有工作。

當我檢查webkit開發人員工具中的元素時，計算樣式仍將半徑列爲5px。但是如果點擊它旁邊的擴展箭頭查看細節，它會顯示：element.style - 0px。在下面它顯示了我給出的0px的外部css規範，以及5px的用戶代理樣式表規範。而後兩者都是他們應該去掉的。

任何想法？

來源

2011-04-25 maxedison

你還可以發佈代碼嗎？如果使用jsfiddle.net發佈它，效果會更好。 – ngen 2011-04-25 15:45:42

我其實沒有任何邊框半徑作爲Win7上Chrome 10的默認樣式，也許這是另一個版本或操作系統？ – 2011-04-25 15:53:08

Windows 7上的Chrome 12中沒有圓角。 – andyb 2011-04-25 16:02:25

179

這對我的作品（樣式第一次亮相不是下拉列表）：

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

http://jsfiddle.net/fMuPt/

來源

2011-04-25 15:59:19 antonj

是的，-webkit的外觀是訣竅。事實上，它擺脫了所有造型（醜陋的漸變背景，右邊的箭頭）。精彩！ – maxedison 2011-04-25 19:38:49

+142

任何方法去除圓角，但保持在右邊的箭頭？ – Adam 2014-06-16 00:59:11

您需要添加箭頭，例如作爲具有100％50％位置和無重複屬性的背景圖像。我也在CSS中使用base64編碼圖像來避免額外的http請求。 – abimelex 2014-07-23 12:27:55

-10

設置CSS爲

border-radius:0px !important 
-webkit-border-radius:0px !important 
border-top-left-radius:0px !important

嘗試，如果它的工作原理。

來源

2011-04-25 15:53:01

不起作用。我在Mac上。 – Homan 2013-01-10 19:46:15

-8

火狐：18

.squaredcorners { 
    -moz-appearance: none; 
}

來源

2013-02-12 12:18:52

關於Chrome/Webkit的問題。 – zishe 2014-07-05 18:31:23

我仍然覺得這很有幫助。 – courtsimas 2017-01-23 16:16:52

出於某種原因，它實際上是受到色彩的邊界？當您使用標準顏色時，角落保持圓角，但如果您稍微改變顏色，則圓角消失。

select.regularcolor { 
    border-color: rgb(169, 169, 169); 
} 

select.offcolor { 
    border-color: rgb(170, 170, 170); 
}

https://jsfiddle.net/hLg70o70/2/

來源

2015-03-19 18:09:02 mcallahan

不，它不。 OSX鉻 – zsitro 2015-10-12 12:17:38

嗯不知道有關OSX。只是在Windows上再次嘗試（Chrome版本45.0），它仍然有效。我想讓問題變得更奇怪，它是特定於平臺的...... – mcallahan 2015-10-13 13:28:57

這是因爲設置邊框會導致瀏覽器呈現組合框本身，而不是使用操作系統提供的底層組件。 – Kong 2015-11-23 05:12:50

如果你想方邊界和仍然希望小擴展箭頭，我建議這樣的：

select.squarecorners{ 
    border: 0; 
    outline: 1px solid #CCC; 
    background-color: white; 
}

來源

2015-05-12 22:56:13 jordan314

這樣做的問題是您將覆蓋'：focus'上的默認'outline'。如果你打算使用這個答案，你應該改變你的'select：focus'風格，直觀地顯示'select'元素變爲活動狀態，或者點擊'：focus'。 – 2015-08-15 00:53:07

這不適用於osx chrome :( – Jammer 2015-10-27 14:24:04

@ 7immy它爲我工作：http://jsfiddle.net/jordan314/78xa6qud/ – jordan314 2015-10-27 19:17:45

雖然最多的回答消除了邊界，它還會刪除箭頭哪些如果用戶不可能將該元素識別爲選擇，則使其變得極其困難。

我的解決方案是在選擇後面粘上一個白色div（邊框半徑：0px）。將其位置設置爲絕對位置，將其高度設置爲選擇的高度，並且您應該很好走！

來源

2015-06-24 09:48:44

好吧，我得到了解決方案。希望它可以幫助你:)

select{ 
 
     border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch; 
 
     width: 120px; 
 
     height: 36px; 
 
     color: #999; 
 
    }

<select> 
 
    <option value="1">Hi</option> 
 
    <option value="2">Bye</option> 
 
</select>

來源

2016-05-25 18:16:27 Amit

只是我有下拉影像解決方案(inline svg)

select.form-control { 
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>"); 
    background-position: 100% 50%; 
    background-repeat: no-repeat; 
}

替代（如上面的一個不與最新的工作火狐）

select.form-control { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -webkit-border-radius: 0px; 
    background-image: url("https://image.flaticon.com/icons/svg/60/60781.svg"); 
    background-position: 99% 50%; 
    background-repeat: no-repeat; 
    background-size: 16px; 
}

我正在使用b這就是爲什麼我使用select.form-control
您可以使用select{或select.your-custom-class{代替。

來源

2016-05-26 13:27:24

這是唯一的答案，解決了我的問題，但要注意使用背景與背景圖像作爲svg的填充顏色將覆蓋你有任何背景顏色爲喲設置你的輸入。 – 2016-06-15 15:16:58

同意，請回答這個問題！我不明白其他選票上的不完整答案。任何建議使用fontawesome圖標，而不是內聯svg？ – 2016-06-29 11:38:33

FontAwesome是圖標的集合，但您只需要一個圖標。所以你需要使用一些工具，如icomoon.io 提取FA圖標之後，將該圖標導出爲svg或png文件，並將其與您的css鏈接 – 2016-07-01 09:57:34

應避免消除箭頭。它保留了下拉箭頭的解決方案是首先從下拉列表中刪除樣式：

<div class="myDiv"></div> 
<select class="myDropdown...">...</select>

和風格的DIV像這樣：

.myDropdown { 
    background-color: #yourbg; 
    border-style: none; 
}

直接在你的HTML下拉在此之前創建的div

.myDiv { 
    background-color: #yourbg; 
    border-style: none; 
    position: absolute; 
    display: inline; 
    border: 1px solid #acolor; 
}

顯示內聯會阻止div進入新行，絕對位置會將其從頁面流中移除。最終的結果是您可以隨心所欲地設計出一個漂亮的乾淨下劃線，並且您的下拉列表仍然按用戶期望的方式運行。

來源

2016-06-10 18:50:47 devigner

插圖盒子陰影有訣竅。

select{ 
    -webkit-appearance: none; 
    box-shadow: inset 0px 0px 0px 4px; 
    border-radius: 0px; 
    border: none; 
    padding:20px 150px 20px 10px; 
}

Demo

來源

2016-09-25 13:56:48 Marconi

這裏有一些很好的解決方案，但這個並不需要SVG，通過outline保留邊框，並將其設置按鈕平齊。

select { 
 
    height: 20px; 
 
    -webkit-border-radius: 0; 
 
    border: 0; 
 
    outline: 1px solid #ccc; 
 
    outline-offset: -1px; 
 
}

<select> 
 
<option>Apple</option> 
 
<option>Ball</option> 
 
<option>Cat</option> 
 
</select>

保持它的簡單，並避免與箭頭和其他類似功能搞亂

來源

2017-08-18 17:11:03 aleemb

的一個方法是，以容納它與相同的背景色選擇標記一個div。

來源

2018-02-24 12:34:38

從Chrome/Webkit中的<select>元素中刪除圓角

回答

相關問題