从Chrome / Webkit的<select>元素中移除圆angular

Chrome的用户代理样式表给5个边距半径的<select>元素的所有angular落。 我已经尝试通过我的外部样式表应用半径为0px,以及内联元素本身; 我已经尝试了border-radius:0px-webkit-border-radius:0px; 我试过了更具体的border-top-left-radius:0px (和它的-webkit相同)。

没有任何工作。

当我检查webkit的开发人员工具中的元素时,“计算样式”仍将半径列为5px。 但是,如果我点击它旁边的扩展箭头查看具体信息,它将显示:element.style – 0px。 在下面,它显示了我给出的0px的外部CSS规范,以及5px的用户代理样式表规范。 而后两者都是他们应该去掉的。

有任何想法吗?

这适用于我(样式第一次出现,不是下拉列表):

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

http://jsfiddle.net/fMuPt/

只是我的解决scheme下拉式图像(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; } 

我正在使用bootstrap,这就是为什么我使用了select.form-control
你可以使用select{select.your-custom-class{来代替。

如果你想要方形边框,仍然想要小扩展箭头,我推荐这个:

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

虽然最上面的答案删除了边框,但是它也移除了箭头,这使得用户非常难以识别该元素作为select。

我的解决scheme是在select后面粘上一个白色的div(边框半径为0px)。 将它的位置设置为绝对,将其高度设置为select的高度,并且应该是好的!

这里有一些很好的解决scheme,但这个不需要SVG,通过outline保留边界并将其设置为button上的flush。

 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{ -webkit-appearance: none; box-shadow: inset 0px 0px 0px 4px; border-radius: 0px; border: none; padding:20px 150px 20px 10px; } 

演示

由于某种原因,它实际上受边界颜色的影响? 当你使用标准颜色的angular落保持圆形,但如果你改变颜色,甚至略有舍去消失。

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

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

以及我得到的解决scheme。 希望它可以帮助你:)

 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> 

应该避免消除箭头。 保留下拉箭头的解决scheme是首先从下拉菜单中删除样式:

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

然后直接在HTML下拉菜单中创builddiv:

 <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不会去到一个新的行,绝对位置将其从页面的stream程中移除。 最终结果是一个很好的干净的下划线,你可以随心所欲的样式,你的下拉列表仍然像用户期望的那样。

火狐:18

 .squaredcorners { -moz-appearance: none; } 

将CSS设置为

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

试试看是否有效。