Question

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的用户代理样式表规范。后两者都被划掉了，应该是这样。

有什么想法吗？

Answer 1

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

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

http://jsfiddle.net/fMuPt/

Answer 2

我的解决方案是下拉图片(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;
}

替代方案（因为上面的一个不适用于最新的Firefox）

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

我正在使用bootstrap，这就是我使用select.form-control的原因您可以改为使用select{或select.your-custom-class{。

Answer 3

If you want square borders and still want the little expander arrow, I recommend this:

from .models import Category # Note the dot before the `models`

Answer 4

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

Answer 5

虽然顶部答案会删除边框，但它也会删除箭头，这使得用户很难（如果不是不可能）将元素标识为选择。

我的解决方案是在选择后面加上一个白色div（边界半径：0px）。将它的位置设置为绝对，将其高度设置为选择的高度，你应该好好去！

Answer 6

带有自定义右下拉箭头的解决方案，仅使用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>

Answer 7

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

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

Demo

Answer 8

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

Answer 9

遵循方法是做到这一点；

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

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

Answer 10

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

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

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

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

Answer 11

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

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>

Answer 12

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

.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不会转到新行，绝对位置会将其从页面流中移除。最终的结果是你可以根据自己的喜好设计一个漂亮的干净下划线，并且你的下拉列表仍然可以像用户期望的那样运行。

Answer 13

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

Answer 14

firefox：18

.squaredcorners {
    -moz-appearance: none;
}

Answer 15

将CSS设置为

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

尝试它是否有效。

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

15 个答案: