代码之家  ›  专栏  ›  技术社区  ›  googletorp

删除表单元素上的默认浏览器样式

  •  1
  • googletorp  · 技术社区  · 14 年前

    注:我试过在谷歌上搜索,但找不到我要找的。

    浏览器有一些用于呈现表单元素的默认样式,这与浏览器不同。是否有一种方法可以重置表单元素(如select、radio、checkbox等)的所有本机浏览器样式,以便在浏览器之间保持一致的外观?

    我举了一个简单的例子:

    form elements http://grab.by/grabs/34db87ee1ad93e031cc72808feb2c8e7.png

    可以看到,表单元素的呈现方式略有不同。我想要的是一些样式,可以重置它们,使其看起来像IE、火狐和Webkit。

    你是怎么做到的?链接到具有所有所需样式的CSS样式表是非常好的。

    2 回复  |  直到 10 年前
        1
  •  6
  •   Michael Robinson    14 年前

    简短回答 你不能。

    长回答 :你可以,但要期待痛苦。

    我用“灵巧的手”javascript+css把好看的单选按钮、复选框和选项拼凑在一起。基本上,在加载一个输入之后,我隐藏它,并用绑定到它们的事件替换它,使它们看起来像是正确的输入,用CSS使它们看起来像是正确的输入。这些事件还更新基础输入,以便将正确的值与表单的其余部分一起提交。如果我的脚本barfs或js关闭,那么用户将获得正常的控件。

    虽然没那么有趣,但结果还是可以接受的。

    我不希望看到这一团糟。

    我的灵感来自:

    http://sourceforge.net/projects/selectreplace/?showfeed=code

        2
  •  2
  •   Chris Smith    10 年前

    这是一个旧问题,但添加了CSS规则 -WebKit外观:无 可能有助于删除默认的WebKit样式,例如Mobile Safari上的丸形按钮。