删除 HTML 按钮/提交的完整样式
Posted
技术标签:
【中文标题】删除 HTML 按钮/提交的完整样式【英文标题】：Remove the complete styling of an HTML button/submit 【发布时间】：2011-03-07 20:04:44 【问题描述】：我在 CSS 中为所有浏览器设置了一个提交按钮的样式，它在除 ie7 之外的所有浏览器中都能正常工作 当我单击提交按钮时，它会稍微移到顶部。它使它看起来变形。 我为 ie 使用了特定的 css。
这是我使用的代码：
.button
width : 80px;
background : none;
cursor : pointer;
font-family : 'voltaeftu-regular',Times New Roman;
font-size : 16px;
color : #fff;
border : none;
margin : 0px;
padding : 0px;
【问题讨论】：
【参考方案1】：我不知道这是否是问题，但您也可以尝试设置活动状态：
.button, .button:active
...
编辑： 在 IE7 中使用了以下 mini-sample 并且看不到按钮移动：
<html>
<head>
<style type="text/css">
.button
width : 80px;
background : none;
cursor : pointer;
font-family : 'voltaeftu-regular',Times New Roman;
font-size : 16px;
color : #fff;
border : 1px solid #0f0;
margin : 0px;
padding : 0px;
</style>
</head>
<body style="background:#f00;">
<input class="button" type="submit"/>
</body>
</html>
只需设置边框即可查看按钮周围环境。代码对我有用。
【讨论】：
HI 标记我也试过了，但是没有用有什么办法可以解决这个问题 您可以尝试其中一种重置 css 并查看问题是否仍然存在。但是在快速查看重置 css 时，我没有看到任何可能导致此问题的按钮设置。【参考方案2】：是的，我担心 IE（和 Opera）在单击时会将按钮的内容向下和向右移动一个像素，这是样式按钮无法避免的问题。
这里有很多可能的方法：
使用带有<span> 的<button>，而不是<input type="button">。将按钮relative和跨度absolute定位在top/left0，这样按钮内容的移动就不会影响跨度。丑陋，并且会在其他浏览器中中断，因此您只希望这种样式适用于 IE-and-maybe-Opera。
使用样式为按钮而不是实际按钮的链接，并将脚本应用于其click 事件。与按钮不同，您可以完全控制链接的一致样式。我建议不要这样做，因为您正在拖入大量对按钮没有意义的链接行为，例如中键单击、右键单击书签、拖放等。很多人确实使用链接做按钮任务，但 IMO 这是非常不可取的。 （特别是当他们使用javascript: 链接时......太可怕了。）
使用诸如<span> 之类的非活动元素代替实际按钮，并将脚本应用于其click 事件。同样，您可以获得完整的样式控制。这就是 SO 用于“添加评论”等操作的内容。问题是你破坏了键盘导航；您不能使用制表符、空格等来导航和激活控件。在大多数浏览器中，您可以通过给元素一个tabindex 属性来启用键盘导航，但是将tabindex 放在非活动元素上是无效的HTML。您也可以从脚本编写它，也可以添加脚本以留出空间或返回以激活人造按钮。但是您永远不会完全完美地重现浏览器表单字段的行为。
将整个内容替换为<input type="image">。自然地，您可以对图像进行像素完美的控制！但是尝试匹配渲染样式，并为每个按钮生成一个新图像，通常是一件让人头疼的事情。
选项 2 和 3 也存在引入 JavaScript 依赖的问题，因此当 JS 不可用时，您的表单会中断。您可以通过在标记中使用普通的<button> 并将其替换为脚本中的其他控件来缓解这种情况，或者如果您从脚本中创建它们无论如何也没问题。但最后，我通常的结论是，这一切都太过分了，结果也太脆弱了，最好的办法是为选项 0 加油：
【讨论】：
【参考方案3】：这也困扰了我很长时间，但我找到了一个不错的解决方案。
首先，您需要通过某种方式在 CSS 中定位特定浏览器。你可以使用 Modernizr，或者我个人最喜欢的，来自http://rog.ie/post/9089341529/html5boilerplatejs 的这个可爱的小 sn-p
<script>
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
</script>
接下来，在您的 HTML 文档中，在您的按钮内，添加一个包含按钮内容的 <span> 标记。将其设置为在友好的浏览器中看起来不错，然后将这段代码添加到 CSS 中按钮的 :active 样式中：
html[data-useragent*='Opera']
您可以将Opera 替换为任何浏览器名称，然后根据自己的喜好设置span 的样式。
它可能看起来像这样：
html[data-useragent*='Opera'] button:active span
position: relative;
left: -1px;
top: -1px;
这有点 hacky，对于这样一个小问题可能有点矫枉过正，但它确实有效。最重要的是，您可以精确控制一切。您甚至可以只针对 Windows 机器或 iPad（使用 data-platform='iPad'）或特定版本的浏览器，如下所示：
html[data-useragent*='Chrome/13.0']
祝你好运！
【讨论】：
以上是关于删除 HTML 按钮/提交的完整样式的主要内容，如果未能解决你的问题，请参考以下文章
HTML5的 input:file上传 样式美化及表单异步提交