Очень просто. В таблице стилей пропишите для input и textarea следущее
input,
textarea {
outline:none;
}
Когда это может понадобиться? Дизайнеры любят перерисовывать системные контролы под дизайн, например такой красивый input
, который должен тянуться на всю предоставляемую ему ширину
А теперь поместим курсор в поле ввода.
Пример из сделанной недавно верстки
Выглядит немного неаккуратно, неправда ли?
Это же свойство можно использовать, если надо избавиться от рамки вокруг ссылок при фокусе на них. Чтобы, например, не портить «красоту» меню.
Хотя убирать outline
и неправильно. При навигации по сайту с помощью только клавиатуры эта рамочка помогает понять, на каком элементе сейчас фокус.
Кликните поочередно на ссылки или используйте клавишу TAB, чтобы навести фокус на них:
обводка есть / обводка убрана
Если убрать обводку, то надо предложить что-нибудь в замен. А то будет не понятно, какое поле в фокусе в данный момент (что особенно плохо, когда переключаются через tab).
а кто ж мешает: всего лишь менять класс по focus/blur у «родителя» (КО к вашим услугам). а топик о том, как убрать обводку, а не улучшить удобство =)
Уважаемые подсажите как избавиться от этой проблемы но только в opera?
а в чем проблема? если еще актуально. и какая опера?
Вот спасибо. Отличная статейка. А то млин бился со стилями, и border: none, и border:0px; ничего не помогало. Конечно для просто для inputa прокатывает, а вот для input:hover, нифига.
Еще раз огромное спасибо….
Спасибо
Сябки.
�?нфа полезная и поадаются разные извращенцы дизайнеры.
А как сделать, чтобы при нажатии на инпут небыло установки курсора?
не совсем понял. можно подробнее?
Если не помогает outline, воспользуйтесь следующими свойствами:
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
Спасибо!
Andrew спасибо!
Разве что префиксы уже излишни. Поддержка box-shadow сейчас уже полная и webkit’ом и файрфоксом.
Супер, спасибо!
input:focus{
outline: none;
}