CSS - 圆形选择,复选框和Radiobutton

时间:2009-04-10 20:54:56

标签: css

有没有办法,如何在不使用任何JavaScript的情况下制作舍入的HTML <select>? 我有这种疯狂的设计,我完全不知道如何只用 CSS 来做。

同样的问题出在checkboxradiobutton上。有人知道如何让它们四舍五入吗?

我需要适用于IE6 +,Firefox 2 +,Opera 9+ ...

的解决方案

alt text http://uploader.chytry.cz/select-checkbox.png

4 个答案:

答案 0 :(得分:2)

没有

现在答案很长:Internet Explorer不适合自己设计风格。您将能够为具有圆角的左侧(文本内容)设置背景图像,但下拉箭头将固定为默认浏览器。您还会发现控件的mousedown和mouseover状态将被修复为默认样式。

我认为在许多情况下,理想的首选设计需要对浏览器标准支持的限制有点务实。具体来说,IE6不支持公平数字的问题和IE7只是略微更符合。

抱歉这个坏消息。

答案 1 :(得分:2)

答案 2 :(得分:1)

没有。表单样式非常有问题,无法保证任何样式都能正常工作。简单的边框和背景颜色/图像通常可以在大多数浏览器中正常工我相信Safari会让你的风格很少。 Check this page了解更详细的信息。

老实说,最好的解决方案是使用javascript。 jQuery click menu是我最近用来模仿选择框的一个很好的解决方案(当选择菜单中的元素时,使用JS在隐藏字段上设置值)。

如果您搜索,我确信还有其他解决方案。

答案 3 :(得分:0)

不,使用javascript或jQuery,你不能这样做。但是如果你需要用jQuery试试这个链接。它包含带jQuery圆角的HTML选择框。

http://webworld-develop.blogspot.com/2011/11/cool-html-5-select-with-jquery-and-css.html