web-dev-qa-db-ja.com

完全に見えないhtmlボタン

次のコードを使用します。

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

このファイルをhtmlファイルとして保存します。ファイルを開くと、表示されていないがまだアクティブなボタンがあります。 Tabキーを押してボタンを選択します。これで、まだ表示されていないボタンの周りに灰色の点線の長方形があります。誰かがその長方形を無効にするのを手伝ってくれませんか。レスポンダーに感謝

完全に非表示のサイトログインを作成しようとしています。これが唯一の表示部分です。助けてください。

htmlbuttoninputvisibilityinvisible
7
VVWdefect

スタイルoutline: 0;を使用して、ボタンがフォーカスされているときにボタンから点線の長方形を無効にすることができます。

例：

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

しかし、あなたがやろうとしていることが正しいかどうかはわかりません...あなたはただボタンを隠そうとしているだけですか？最善の策は、display: none;を使用することです

例：

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

これは私のために働きます。 （Opera so YMMV）でのみテストされています）。

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

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

4
concentricpuddle

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>
1
emcconville

何をしたかと同じように透明にしてから、ボタンを無効にします。これは私にとって完璧に機能します。

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