从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; }
只是我的解决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); }
以及我得到的解决scheme。 希望它可以帮助你:)
select{ border-image: url(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
试试看是否有效。
