从Chrome / Webkit中的<select>元素删除圆角

143

Chrome的用户代理样式表为<select>元素的所有角提供了5px的边框半径。我尝试通过在外部样式表中应用半径为0px以及元素本身的内联来摆脱这种情况；我已经尝试了两者border-radius:0px，-webkit-border-radius:0px;并且尝试了更具体的方法border-top-left-radius:0px（以及-webkit等效项）。

没有任何工作。

当我检查webkit开发人员工具中的元素时，“计算样式”仍将半径列为5px。但是，如果我单击它旁边的扩展器箭头以查看详细信息，它将显示为：element.style-0px。在其下方，它显示了我给出的外部CSS规范（0px）以及用户代理样式表规范（5px）。后两者都应该删除。

有任何想法吗？

select webkit css

— 麦迪逊
source

您还可以发布代码吗？如果您使用jsfiddle.net发布它，那就更好了。

— ngen

1

实际上，我在Win7的Chrome 10中没有默认的边框半径样式，也许这是其他版本或操作系统吗？

— 韦斯利·默奇

Windows 7上的Chrome 12也没有圆角。

— andyb 2011年

1

应该提到，它是在Mac OS X

— maxedison

244

这对我有用（样式为首次显示而不是下拉列表）：

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

http://jsfiddle.net/fMuPt/

— 安东尼
source

179

有什么方法可以去除圆角，但保持箭头右侧？

— 亚当

3

您需要添加箭头，例如作为背景图像，位置为100％50％，并且具有no-repeat属性。我还在CSS中使用了base64编码的图像，以避免其他http请求。

— Karl Adler 2014年

26

@Adam如果您使用border: 0并添加如下轮廓，则对我有用：outline: 1px inset black; outline-offset:-1px

— Filipe Pereira

1

@FilipePereira很好，我喜欢它，尽管我必须添加IE不支持outline-offset。

— 蒂姆（Tim）

6

这消除了右边的箭头，这不可接受地损坏了用户体验。取而代之的是，设置下拉菜单的样式background-color: #yourbg，border-style: none然后使用position: absolute和border-bottom: 1px solid #youpick和在下拉菜单之前直接创建一个div display: inline。保留了箭头，未损坏UX，修复效果更好。

— devigner

90

只是我的下拉菜单解决方案 (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='%23444' 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
“可以使用” select{或“ select.your-custom-class{替代”的原因。

— 阿夫扎尔·侯赛因
source

4

这是解决我问题的唯一答案，尽管请注意使用背景与背景图像，因为svg的填充颜色将覆盖您为输入设置的任何背景颜色。

— 卢卡斯M

同意，请对这个答案投票！对于不完整的答案，我不理解其他选票。有什么建议使用fontawesome图标而不是嵌入式svg吗？

— Nicolas Thery

FontAwesome是图标的集合，但是您只需要一个图标。所以，你需要使用像icomoon.io一些工具提取的FA图标之一，出口后该图标为SVG或PNG文件，从你的CSS链接它

— 阿夫扎尔·侯赛因

很好的解决方案，但是在我的情况下，我添加了background-color：白色；

— Viktor Bogutskii

但是请注意，当您设置时width: auto;，添加的svg箭头会覆盖所选内容。这需要在16px的右侧附加填充。但是，该填充在所有浏览器上都是可见的，从而破坏了其他浏览器的设计。我还没有解决方案……

— 克拉斯·范德·韦伊

31

如果您想使用正方形边框，但仍然需要扩展小箭头，则建议这样做：

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

— 约旦314
source

2

这里的问题是，你将覆盖默认outline的:focus。如果您要使用此答案，则您则应更改select:focus样式以直观地显示该select元素:focus在单击时变为活动状态或ed。

— 德文·麦金尼斯

@ jordan314查看此图片上的圆角。边界半径：0；对选择标签没有影响。至少要在Chrome OSX上。

— Jammer

1

@ 7immy，很奇怪，我也在Chrome OS X上，这是上面的小提琴的屏幕截图imgur.com/r6ce6Yv

— jordan314

1

@ jordan314这个怎么样？ jsfiddle.net/78xa6qud/2。我想如果选择的背景和它后面的背景是相同的颜色，我们可以解决它。

— Jammer

@ 7immy啊，是的，我想这是一个警告。

— jordan314

7

这里有一些很好的解决方案，但此解决方案不需要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>

展开摘要

— lee
source

6

尽管最上面的答案删除了边框，但它也删除了箭头，这使用户将元素识别为选择非常困难，即使不是不可能。

我的解决方案是将白色div（带有border-radius：0px）粘贴在选择后面。将其位置设置为绝对位置，将其高度设置为所选对象的高度，那么您应该一切顺利！

— 里德·马丁
source

4

具有自定义右下拉箭头的解决方案，仅使用CSS（无图像）

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;

  -moz-appearance: none;
  display: block;
  padding: 0.3rem;
  height: 2rem;
  width: 100%;
}

<html>

<body>
  <br/>
  <h4>Example</h4>
  <select>
    <option></option>
    <option>Hello</option>
    <option>World</option>
  </select>
</body>

</html>

展开摘要

— Mihai Crăiță
source

更好地满足我的需求的背景定位是：background-position: calc(100% - 4px) center, 100% center;这会将箭头移到选择的中间，并一直向右移动。非常感谢您的美好的开端！

— 布兰登

3

一种使其保持简单并避免弄乱箭头和其他此类功能的方法是，将其放在与选择标签具有相同背景颜色的div中。

— 丹尼·桑托斯（Danny Santos）
source

1

我同意，这是迄今为止最简单，最可靠和可移植的解决方案。

— 约翰·亨克尔

1

应避免消除箭头。保留下拉箭头的一种解决方案是先从下拉菜单中删除样式：

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

然后在HTML下拉列表之前直接创建div：

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

并像这样设置div的样式：

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

内联显示将使div不能换行，绝对位置会将其从页面流中删除。最终结果是您可以随意设置样式的漂亮下划线，并且下拉菜单的行为仍与用户期望的一样。

— 恶魔
source

1

插入框阴影可以解决问题。

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

演示版

— 马克·阿罗里（Marco Allori）
source

0

由于某种原因，它实际上受边框颜色的影响？？？当您使用标准颜色时，拐角会保持圆角，但是如果您更改颜色，则即使略微变圆也会消失。

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

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

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

— 姆卡拉汉
source

嗯不确定OSX。刚刚在Windows（Chrome版本45.0）上再次尝试过，它仍然可以正常使用。我想让这个问题变得更奇怪，因为它是特定

— mcallahan

那是因为设置边框会导致浏览器呈现组合框本身，而不是使用操作系统提供的基础组合框。

— Kong

0

好吧，我得到了解决方案。希望它可以对您有所帮助:)

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>

展开摘要

— 阿米特
source

0

以下是做到这一点的方法；

创建一个看起来像下拉菜单的背景图像。
关闭浏览器外观
在选择的组件上对齐背景图像

  .control select {  
    border-radius: 0px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("<your image>");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 20px;
  }

— 杰罗姆·安东尼
source

-1

我使用了jordan314的解决方案，但随后添加了“ border-light”类进行选择。如果您在CSS中定义了默认的border-light类，则可以直接使用它。它只是将边框定义为白色）。我将边框更改为正方形/删除了半径，并保持了箭头。

这是我所做的：

<select class="form-control border border-light" id="type">
   <option>Select</option>
   <option value="mobile">Apple</option>
 </select>

如果您没有预定义的边框灯，只需在CSS中添加：

<style>
.border-light{
         border-color:#f8f9fa!important
     }

 #type {
   border:0;
   outline:1px solid #ddd;
   background-color:white;
 }
</style>

— 西蒂·穆尼拉·阿卜杜勒·拉扎克
source

-8

火狐：18

.squaredcorners {
    -moz-appearance: none;
}

— 大卫·福斯特纳
source

有关Chrome / Webkit的问题。

— zishe 2014年

-10

将CSS设置为

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

尝试是否可行。

— AbhiRoczz ...
source