Completely invisible html buttons

Use the following code:

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

Save this file as an html file. If you open the file, an invisible but still active button will appear. Press Tab to select a button. Now around the fixed invisible button is a gray rectangle with dots. Can someone help me disable this rectangle. Thanks to the respondents.

I am trying to make the site’s completely invisible login that the only visible part is, please help.

+5
source share
5 answers

You can use the style outline: 0;to disconnect the dashed rectangle from the button when focusing.

Example:

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

, , , ... ? display: none;

:

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

. ( Opera, YMMV).

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

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

+4

Use CSS: focus and: active pseudo-classes

<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>
+1
source

Just make it transparent like you, and then turn off the button. This works great for me.

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

Do not use the button at all.

Use AJAX to send login data via mail and process the response on your page.

-1
source

All Articles