Блог

Главная - Вопросы по программированию - Удалить черный контур кнопок ввода в IE 9 с помощью css

Удалить черный контур кнопок ввода в IE 9 с помощью css

#javascript #jquery #css #html

#javascript #jquery #css #HTML

Вопрос:

Возможно ли удалить раздражающую черную рамку, которую IE 9 помещает вокруг кнопок отправки?

Это происходит только тогда, когда форма находится в фокусе.

IE 9:

IE 9 http://olokoo.com/sandbox/ie.jpg

FireFox

Firefox http://olokoo.com/sandbox/firefox.jpg

Комментарии:

1. Эти линии фокусировки существуют не просто так. Это помогает пользователям знать, что они могут нажать enter или пробел. Не так «раздражает», если вы спросите меня…

2. Я добавил свои собственные границы, которые становятся видимыми при фокусировке с помощью jquery. Черная граница размером 2 пикселя просто не соответствует моему дизайну, я знаю, что людям нравится знать, когда они могут нажать enter..

3. вы пробовали border:none; и / или outline:none; ?

4. Можете ли вы опубликовать свой код? Я не вижу здесь никакой черной границы: jsfiddle.net/gilly3/PMmAn

5. После играть вокруг с кодом, который размещен на jsfiddle, я понял, что единственное различие между моим кодом и вашим кодом было <!DOCTYPE html> и <META http-equiv=»content-type» content=»text/html; charset=UTF-8″> поэтому, когда я поменялся из за тебя, он работал отлично. Я не совсем уверен, почему, но это также изменило способ обработки заполнения, но на самом деле это не проблема. Спасибо.

Ответ №1:

Вы можете использовать jQuery, если хотите, но добавление следующего в ваш CSS должно исправить это

 input[type=submit] { border:none !important; }

// редактировать согласно вашему комментарию

В зависимости от того, хотите ли вы использовать HTML5 или нет, вам необходимо убедиться, что вы правильно настроили DOCTYPE и meta-теги:

Настройка HTML5:

 <!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

Примеры настройки HTML4 см. в: W3School

Ответ №2:

Если вы хотите удалить границу с кнопок с помощью jQuery, должно сработать что-то вроде этого:

 $(":button").css({border-width:"0px"});