CODEWITHSUNDEEP
htmlbuttoninputvisibilityinvisible
VVWdefect
VVWdefect

Reputation: 151

Totally 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 a html file. If you open the file there is an invisible but still active button. Press Tab to select the button. Now there is a grey dotted rectangle arround the still invisible button. Can someone help me to disable that rectangle. Thanks to responders

I'm trying to make a totally invisible site login, that's the only visible part of it, please help.

Upvotes: 9

Views: 82859

Answers (5)

AntiqueWhale
AntiqueWhale

Reputation: 181

Just make it transparent as you what did, and then make the button disabled. This works perfectly for me.

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

Upvotes: 0

concentricpuddle
concentricpuddle

Reputation: 787

This works for me. (Only tested on Opera so YMMV).

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

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

Upvotes: 6

boisvert
boisvert

Reputation: 3729

Don't use a button at all.

Use AJAX to send login data via post and handle the response within your page.

Upvotes: -1

emcconville
emcconville

Reputation: 24419

Use CSS :focus & :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>

Upvotes: 1

McHerbie
McHerbie

Reputation: 2995

You can use the style outline: 0; to disable the dotted rectangle from the button when it's focused.

Example:

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

Though, I'm not sure what you are trying to do is correct... Are you just trying to hide the button? Your best bet is to use display: none;

Example:

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

Upvotes: 21

Related Questions