Does anybody know a workaround for following 'bug' in webkit?
有人知道在webkit中关注'bug'的解决方法吗？
When I use border-radius and border solid 1px to create rounded borders on select tag it just works fine on webkit, FF and so on
当我使用border-radius和border solid 1px在select标签上创建圆形边框时，它只适用于webkit，FF等等
But when the border more than 1px you can see the containers background overlapping the border.
但是当边界超过1px时，您可以看到容器背景与边框重叠。
You can see it here: http://dabblet.com/gist/2909020
你可以在这里看到它：http：//dabblet.com/gist/2909020
(just change border: solid 2px #9ec3d6; to 1px to see the difference)
（只需改变边框：实心2px＃9ec3d6;到1px看看差异）
Thanks for your help!
谢谢你的帮助！
1 个解决方案
#1
0
With -webkit-appearance: none; you can hide the rectangle border, but this will also hide the usual dropdown icon of the select box, but you could add some background images to bring back some kind of visual indicator for the select box.
使用-webkit-appearance：none;您可以隐藏矩形边框，但这也会隐藏选择框的常用下拉图标，但您可以添加一些背景图像以为选择框带回某种可视指示器。
Look at these examples: http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit
看看这些例子：http：//37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit
#1
0
With -webkit-appearance: none; you can hide the rectangle border, but this will also hide the usual dropdown icon of the select box, but you could add some background images to bring back some kind of visual indicator for the select box.
使用-webkit-appearance：none;您可以隐藏矩形边框，但这也会隐藏选择框的常用下拉图标，但您可以添加一些背景图像以为选择框带回某种可视指示器。
Look at these examples: http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit
看看这些例子：http：//37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit