完全不可见的 html 按钮答案

【问题标题】：Totally invisible html buttons完全不可见的 html 按钮
【发布时间】：2011-08-10 11:51:31
【问题描述】：

使用以下代码：

<html>
<body>
<input type="submit" style="color: transparent; background-color: transparent; border-color: transparent; cursor: default;">
</body>
</html>

将此文件另存为 html 文件。如果您打开文件，则会有一个不可见但仍处于活动状态的按钮。按 Tab 选择按钮。现在仍然不可见的按钮周围有一个灰色的虚线矩形。有人可以帮我禁用那个矩形。感谢响应者

我正在尝试制作一个完全不可见的网站登录，这是它唯一可见的部分，请帮助。

【问题讨论】：

这是浏览器让您知道哪个控件具有焦点的方式。我认为它不能通过 HTML 禁用。
也许更多关于您的用例的信息会有所帮助？
我对此有一种不好的感觉...如果您不想将它用于任何狡猾的事情，并且说，如果用户按下回车键，您想要执行默认操作，请使用像 jQuery 这样的框架并监听按键。或者只是尝试正确地重新设计您的 UI。
更多关于你想要完成的事情的信息会很好。这在很多层面上都是不好的做法，可能有更好的方法来做到这一点，除非您确实试图欺骗访问者。
@VVWdefect 如果您问一个明显的应用程序是非法的问题，并且没有解释为什么您的行为不违法，那么我会假设您的行为是非法的。这不像是我要报警 - 我只是不会帮忙。

标签： html button input visibility invisible

【解决方案1】：

只需像您所做的那样使其透明，然后禁用按钮。这对我来说非常有效。

<input type="submit" style="color: transparent; background-color: transparent; border-color: transparent; cursor: default;" disabled>

【讨论】：

【解决方案2】：

这对我有用。（仅在 Opera 所以 YMMV 上测试过）。

<input type="submit" style="background:transparent; border:none; color:transparent;">

http://jsfiddle.net/AHsdJ/3/

【讨论】：

这对我也有用。我认为最好结合使用outline 和border。例如。 background-color:transparent; color:transparent; outline:none; text-decoration: none; cursor: pointer; border:none;

【解决方案3】：

根本不要使用按钮。

使用 AJAX 通过 post 发送登录数据并处理页面内的响应。

【讨论】：

【解决方案4】：

使用 CSS :focus & :active 伪类

<html>
<head>
<style type="text/css">
input:focus, input:active { outline: none;}
</style>
</head>
<body>
<input type="submit" style="color: transparent; background-color: transparent; border-color: transparent; cursor: default;">
</body>
</html>

【讨论】：

【解决方案5】：

您可以使用样式outline: 0; 在按钮获得焦点时禁用虚线矩形。

示例：

<input type="submit" style="outline: 0;">

不过，我不确定您要执行的操作是否正确...您只是想隐藏按钮吗？你最好的选择是使用display: none;

示例：

<input type="submit" style="display: none;">

【讨论】：

jsfiddle.net/userdude/AHsdJ 不，看起来他们正试图让表单的提交按钮在不知情的情况下可点击。