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

Posted 2023-03-06

技术标签:

【中文标题】从 Chrome/Webkit 中的 <select> 元素中删除圆角【英文标题】：Removing rounded corners from a <select> element in Chrome/Webkit 【发布时间】：2011-08-12 09:56:04 【问题描述】：

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

没有一个在工作。

当我在 webkit 的开发者工具中检查元素时，Computed Style 仍然将半径列为 5px。但是，如果我单击它旁边的扩展箭头查看详细信息，它会显示：element.style - 0px。下面显示了我给出的 0px 的外部 css 规范，以及 5px 的用户代理样式表规范。后两者都被划掉了，应该划掉。

有什么想法吗？

【问题讨论】：

您也可以发布代码吗？如果您使用 jsfiddle.net 发布它会更好。我实际上在 Win7 上的 Chrome 10 中没有任何边框半径作为默认样式，也许这是另一个版本或操作系统？ Windows 7 上的 Chrome 12 中也没有圆角。应该提到它在 Mac OS X 上。 【参考方案1】：

只是我的解决方案，带有下拉图片(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。

【讨论】：

这是解决我的问题的唯一答案，但请注意使用背景与背景图像，因为 svg 的填充颜色会覆盖您为输入设置的任何背景颜色。同意，请为这个答案投票！我不理解对不完整答案的其他投票。有什么建议使用 fontawesome 图标而不是内联 svg 吗？ FontAwesome 是一组图标，但您只需要一个图标。因此，您需要使用 icomoon.io 之类的工具提取其中一个 FA 图标，然后将该图标导出为 svg 或 png 文件并从您的 css 链接它不错的解决方案，但在我的情况下，我添加了 background-color: white; 但是请注意，当您设置 width: auto; 时，添加的 svg 箭头会覆盖选择的内容。这需要在 16px 的右侧添加额外的填充。然而，这种填充在所有浏览器上都是可见的，破坏了其他浏览器的设计。我还没有解决方案...【参考方案2】：

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

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

  .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;

【讨论】：

【参考方案3】：

我使用了 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>

【讨论】：

【参考方案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>

【讨论】：

更适合我需要的背景定位是：background-position: calc(100% - 4px) center, 100% center; 这会将箭头移动到选择的中间并一直移动到右侧。非常感谢您的良好开端！【参考方案5】：

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

【讨论】：

我同意，这是迄今为止最简单、最可靠和最便携的解决方案。【参考方案6】：

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

【讨论】：

【参考方案7】：

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

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

Demo

【讨论】：

【参考方案8】：

应避免消除箭头。保留下拉箭头的解决方案是首先从下拉列表中删除样式：

.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 进入新行，绝对位置将其从页面流中删除。最终结果是一个漂亮干净的下划线，您可以根据需要设置样式，并且您的下拉菜单的行为仍然与用户期望的一样。

【讨论】：

【参考方案9】：

我得到了解决方案。希望它可以帮助你:)

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

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

【讨论】：

【参考方案10】：

虽然顶部答案删除了边框，但它也删除了箭头，这使得用户很难将元素识别为选择。

我的解决方案是在选择后面粘贴一个白色 div（边框半径：0px）。将其位置设置为绝对，将其高度设置为选择的高度，您应该一切顺利！

【讨论】：

【参考方案11】：

如果你想要方形边框并且仍然想要小扩展箭头，我推荐这个：

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

【讨论】：

这样做的问题是您将覆盖:focus 上的默认outline。如果您打算使用此答案，您应该更改您的select:focus 样式，以直观地显示select 元素已变为活动状态，或:focused，点击。 @jordan314 查看rounded corners on this pic。边界半径：0；对选择标签没有影响。至少在 Chrome OSX 上是这样。 @7immy 真奇怪，我也在 Chrome OS X 上，这是上面小提琴的截图imgur.com/r6ce6Yv @jordan314 这个怎么样？ jsfiddle.net/78xa6qud/2。如果选择的背景和它后面的背景颜色相同，我想我们可以摆脱它。 @7immy 啊是的，我想这是一个警告。【参考方案12】：

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

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


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

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

【讨论】：

嗯，不确定 OSX。刚刚在 Windows（Chrome 版本 45.0）上再次尝试，它仍然有效。我想让这个问题更奇怪的是它是特定于平台的...... 那是因为设置边框会导致浏览器自己渲染组合框，而不是使用操作系统提供的底层。【参考方案13】：

火狐：18

.squaredcorners 
    -moz-appearance: none;

【讨论】：

关于Chrome/Webkit的问题。【参考方案14】：

将 CSS 设置为

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

试试看是否可行。

【讨论】：

【参考方案15】：

这对我有用（样式第一次出现而不是下拉列表）：

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

http://jsfiddle.net/fMuPt/

【讨论】：

有什么方法可以去掉圆角但保持箭头在右边？您需要添加箭头，例如作为具有位置 100% 50% 和无重复属性的背景图像。我还在 css 中使用了 base64 编码的图像来避免额外的 http 请求。 @Adam 如果您使用 border: 0 并添加如下大纲，它对我有用：outline: 1px inset black; outline-offset:-1px @FilipePereira 不错，我喜欢它，但我必须补充一点，IE 不支持轮廓偏移。这消除了右侧的箭头，这对用户体验造成了不可接受的损害。相反，设置下拉列表background-color: #yourbg 和border-style: none 的样式，然后使用position: absolute 和border-bottom: 1px solid #youpick 和display: inline 在下拉列表之前直接创建一个div。箭头保留，用户体验未受损，更好的修复。

以上是关于从 Chrome/Webkit 中的 <select> 元素中删除圆角的主要内容，如果未能解决你的问题，请参考以下文章

Chrome（webkit）中浮动元素中的用户文本选择选择更多文本[关闭]

无法在 Safari 和 Chrome (WebKit) 中将 `margin` 添加到 `<legend>` 元素

如何获取 Chrome / WebKit 中过渡的元素的当前颜色？

在 Chrome/WebKit/Safari 中禁用锚点

Safari/Chrome (Webkit) - 无法隐藏 iframe 垂直滚动条

使用 Chrome/WebKit 调试 Access-Control-Allow-Origin