Полностью невидимые html-кнопки

Используйте следующий код:

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

Сохраните этот файл как html-файл. Если вы открываете файл, там есть невидимая, но все еще активная кнопка. Нажмите Tab, чтобы выбрать кнопку. Теперь вокруг невидимой кнопки появился серый пунктирный прямоугольник. Может кто-нибудь помочь мне отключить этот прямоугольник. Спасибо ответившим

Я пытаюсь сделать вход на сайт полностью невидимым, это единственная видимая его часть, пожалуйста, помогите.


button input html visibility invisible
person VVWdefect    schedule 21.04.2011    source источник
comment
Это способ браузера сообщить вам, какой элемент управления находится в фокусе. Я не думаю, что его можно отключить через HTML.   -  person Fantius    schedule 21.04.2011
comment
Возможно, вам поможет дополнительная информация о вашем варианте использования?   -  person IHateATMFees    schedule 21.04.2011
comment
Возможно, вам следует опубликовать вопрос о том, что вы пытаетесь сделать, и посмотреть, какие у людей есть идеи о других способах достижения того, что вы пытаетесь сделать.   -  person Fantius    schedule 21.04.2011
comment
Если вы хотите скрыть кнопку отправки, просто используйте display: none; Если это не поможет, предоставьте больше информации о том, чего вы пытаетесь достичь, как говорит IHateATMFees.   -  person Thilo    schedule 21.04.2011
comment
Вы не увидите этот прямоугольник на сенсорном устройстве, таком как iPhone. Потому что браузер решил, что это не нужно.   -  person Fantius    schedule 21.04.2011
comment
У меня плохое предчувствие по этому поводу... на случай, если вы не хотите использовать его для чего-то хитрого, и скажем, вы хотите сделать действие по умолчанию, если пользователь нажимает клавишу ввода, используйте фреймворк, такой как jQuery, и слушайте нажатия клавиш . Или просто попробуйте правильно переделать свой пользовательский интерфейс.   -  person DarthJDG    schedule 21.04.2011
comment
Было бы хорошо получить дополнительную информацию о том, чего вы пытаетесь достичь. Это плохая практика на многих уровнях, и, вероятно, есть лучший способ сделать это, если вы действительно не пытаетесь обмануть посетителей.   -  person Brent Friar    schedule 21.04.2011
comment
Без объяснений, похоже, вы делаете что-то, с чем я бы не хотел помогать.   -  person Dan Blows    schedule 21.04.2011
comment
ЧУВАКИ, Я ПРОЧИТАЛ КОММЕНТАРИИ, Я НЕ НАРУШЕН ИЛИ КТО-ТО!!!   -  person VVWdefect    schedule 21.04.2011
comment
@VVWdefect Если вы зададите вопрос, очевидное применение которого является чем-то незаконным, и не объясните, почему то, что вы делаете, не является незаконным, тогда я предполагаю, что то, что вы делаете, является незаконным. Не то чтобы я звонила в полицию — я просто не собираюсь помогать.   -  person Dan Blows    schedule 22.04.2011
comment
возможный дубликат Как удалить точечный наброски на КНОПКИ, а также ссылки?   -  person kapa    schedule 22.04.2011

Ответы (5)


arrow_upward
19
arrow_downward

Вы можете использовать стиль outline: 0;, чтобы отключить пунктирный прямоугольник на кнопке, когда она находится в фокусе.

Пример:

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

Хотя я не уверен, что вы пытаетесь сделать правильно... Вы просто пытаетесь скрыть кнопку? Лучше всего использовать display: none;

Пример:

<input type="submit" style="display: none;">
person McHerbie    schedule 21.04.2011
comment
jsfiddle.net/userdude/AHsdJ Нет, похоже, они пытаются сделать кнопку отправки для форма, кликабельная без чьего-либо ведома, что она есть. - person Jared Farrish; 21.04.2011

arrow_upward
5
arrow_downward

Это работает для меня. (Проверено только в Opera, поэтому YMMV).

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

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

person concentricpuddle    schedule 28.11.2013
comment
Это сработало и для меня. Я думаю, что лучше всего использовать комбинацию outline и border. Например. background-color:transparent; color:transparent; outline:none; text-decoration: none; cursor: pointer; border:none; - person dayuloli; 01.03.2014

arrow_upward
1
arrow_downward

Используйте псевдоклассы 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>
person emcconville    schedule 21.04.2011

arrow_upward
0
arrow_downward

Просто сделайте его прозрачным, как вы это сделали, а затем отключите кнопку. Это отлично работает для меня.

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

arrow_upward
-1
arrow_downward

Не используйте кнопку вообще.

Используйте AJAX для отправки данных для входа по почте и обработки ответа на вашей странице.

person boisvert    schedule 28.03.2013