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

小开

将 CSS 设置为

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

试试看有没有用。

小开

最佳答案

这对我很有用(样式第一个出现而不是下拉列表) :

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

Http://jsfiddle.net/fmupt/

小开

Firefox: 18

.squaredcorners {
-moz-appearance: none;
}

小开

由于某种原因，它实际上受到边框颜色的影响？当你使用标准颜色的角保持圆形，但如果你改变颜色，甚至略有舍入消失。

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


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

Https://jsfiddle.net/hlg70o70/2/

小开

如果你想要正方形的边框，同时还想要一个小小的展开箭头，我建议这样做:

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

小开

顶部的答案移除了边框，同时也移除了箭头，这使得用户很难将元素识别为一个 select。

我的解决方案是在 select 后面粘贴一个白色的 div (边界半径: 0px)。将它的位置设置为绝对，将它的高度设置为选择的高度，就应该可以了！

小开

我有办法，希望能帮到你

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>

小开

只是我的解决方案与下拉图像 (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{代替。

小开

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

.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 转到新行，位置绝对值将它从页面流中移除。最终的结果是一个非常干净的下划线，您可以根据自己的喜好设置样式，并且您的下拉列表仍然按照用户所期望的那样运行。

小开

插入盒子阴影就行了。

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

演示

小开

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

小开

保持简单并避免与箭头和其他类似特性混淆的一种方法是将其放置在与 select 标记具有相同背景颜色的 div 中。

小开

解决方案与自定义右下拉箭头，只使用 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>

小开

我使用了 jordan314的解决方案，但是后来我添加了“ orders-light”类来选择。如果您在 css 中定义了默认的边框灯类，那么您可以直接使用它。它只是将边界定义为白色)。我修改了边框以正方形/移除半径，并保留了箭头。

我是这么做的:

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

小开

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

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

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