Как убрать обводку у input и textarea в Сафари и Хроме?

Очень просто. В таблице стилей пропишите для input и textarea следущее


                input,
                textarea {
                    outline:none;
                }
                

 

Когда это может понадобиться? Дизайнеры любят перерисовывать системные контролы под дизайн, например такой красивый input, который должен тянуться на всю предоставляемую ему ширину
input без фокуса

А теперь поместим курсор в поле ввода.

поле ввода с фокусом

Пример из сделанной недавно верстки

Выглядит немного неаккуратно, неправда ли?

Это же свойство можно использовать, если надо избавиться от рамки вокруг ссылок при фокусе на них. Чтобы, например, не портить «красоту» меню.
условное меню с фокусом на одном из пунктов пунктом
Хотя убирать outline и неправильно. При навигации по сайту с помощью только клавиатуры эта рамочка помогает понять, на каком элементе сейчас фокус.

Кликните поочередно на ссылки или используйте клавишу TAB, чтобы навести фокус на них:
обводка есть / обводка убрана

Как убрать обводку у input и textarea в Сафари и Хроме?: 14 комментариев

  1. Если убрать обводку, то надо предложить что-нибудь в замен. А то будет не понятно, какое поле в фокусе в данный момент (что особенно плохо, когда переключаются через tab).

  2. а кто ж мешает: всего лишь менять класс по focus/blur у «родителя» (КО к вашим услугам). а топик о том, как убрать обводку, а не улучшить удобство =)

  3. Уважаемые подсажите как избавиться от этой проблемы но только в opera?

  4. а в чем проблема? если еще актуально. и какая опера?

  5. Вот спасибо. Отличная статейка. А то млин бился со стилями, и border: none, и border:0px; ничего не помогало. Конечно для просто для inputa прокатывает, а вот для input:hover, нифига.

    Еще раз огромное спасибо….

  6. Сябки.
    Инфа полезная и поадаются разные извращенцы дизайнеры.

  7. А как сделать, чтобы при нажатии на инпут небыло установки курсора?

  8. Если не помогает outline, воспользуйтесь следующими свойствами:

    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *