Нежелательный контур или рамка вокруг кнопки при нажатии - PullRequest
Новая
       24

Нежелательный контур или рамка вокруг кнопки при нажатии

20 голосов
/ 24 декабря 2010

У меня есть стилизованная кнопка на моем сайте.Но когда я нажимаю на него, он создает нежелательную границу или контур (я не знаю, какой).Как я могу удалить эту границу?Ниже приведен весь код, который относится к кнопке. 

button {
    border: hidden;
    cursor: pointer;
    outline: none;
}
<button>this is my button</button>

Ответы [ 5 ]

21 голосов
/ 19 апреля 2011

Используйте любой из этих стилей CSS 

a:active, a:focus,input, input:active, input:focus{     outline: 0;     outline-style:none;     outline-width:0; }  
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner 
{     border: none; }

OR 

:focus {outline:none;} ::-moz-focus-inner {border:0;}

Как только часть CSS Style будет готова, вам также может понадобиться установить IE-Emulator. Обновите файл web.config веб-приложений и включите ключ ниже. 

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
      </customHeaders>
    </httpProtocol>

  </system.webServer>
12 голосов
/ 24 декабря 2010

Если вы говорите о пунктирной линии в Firefox, я думаю, что вы ищете это: 

button::-moz-focus-inner { border: 0; }

Это тема на тему: Как удалить пунктирную Firefoxнаброски на кнопки, а также ссылки?

4 голосов
/ 06 июня 2016 
outline: none;

Это сработало для меня в Chrome.

2 голосов
/ 25 июля 2017

Это план. Используйте outline:none; on: focus, чтобы удалить его. Хорошо сработало для меня.

1 голос
/ 06 июля 2017

Пожалуйста, не удаляйте контуры стилей фокусировки, это делает ваш сайт менее доступным для пользователей только с клавиатуры и слабовидящих.

Если вы решите добавить что-то вроде :focus { outline: none; } в свои таблицы стилей, также добавьте свои собственные стили для выделенных элементов.

Чтение: Никогда не удаляйте контуры CSS

...