Как убрать обводку у input и textarea в Сафари и Хроме?
Это же свойство можно использовать, если надо избавиться от рамки вокруг ссылок при фокусе на них. Чтобы, например, не портить «красоту» меню.
Хотя убирать outline и неправильно. При навигации по сайту с помощью только клавиатуры эта рамочка помогает понять, на каком элементе сейчас фокус.
Кликните поочередно на ссылки или используйте клавишу TAB, чтобы навести фокус на них:
обводка есть / обводка убрана
Опубликовано 29.04.2009 29.03.2013 Автор admin Рубрики CSS Метки CSS-рецепты
Как убрать обводку у input и textarea в Сафари и Хроме?: 15 комментариев
Если убрать обводку, то надо предложить что-нибудь в замен. А то будет не понятно, какое поле в фокусе в данный момент (что особенно плохо, когда переключаются через tab).
а кто ж мешает: всего лишь менять класс по focus/blur у «родителя» (КО к вашим услугам). а топик о том, как убрать обводку, а не улучшить удобство =)
Уважаемые подсажите как избавиться от этой проблемы но только в opera?
а в чем проблема? если еще актуально. и какая опера?
Вот спасибо. Отличная статейка. А то млин бился со стилями, и border: none, и border:0px; ничего не помогало. Конечно для просто для inputa прокатывает, а вот для input:hover, нифига. Еще раз огромное спасибо….
Oleksandr Luk’yanchenko :
Сябки.
�?нфа полезная и поадаются разные извращенцы дизайнеры.
А как сделать, чтобы при нажатии на инпут небыло установки курсора?
не совсем понял. можно подробнее?
Andrew :
Если не помогает outline, воспользуйтесь следующими свойствами: -moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
Как убрать обводку у input в css
Здесь могла бы быть ваша реклама
Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006
Откуда: Israel
Помог: 3 раз(а)
Секрет
Теперь, когда вы уже наверняка второпях отправили свой запрос,
я расскажу вам простой секрет, который сэкономит вам уйму ожиданий,
даже если первый ответ по теме последуем сразу же.
Само собой я знаю что ответят мне тут же, и если я посмотрю
на сообщения на форуме, то пойму что в общем то я и не ошибаюсь.
Но еще я точно замечу, что очень мало тем, в которых всего два ответа :
вопрос автора и еще два сообщение вида Ответ + Спасибо
После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..
Уверен что если бы я им сказал что у меня есть
фиолетовый квадрат, и нужно превратить его в синий треугольник
и я пытался взять кисточку, макнуть в банку и поводить ей по квадрату
но почему то кисточка не принимала цвет краски в банке,
то на мой вопрос — где взять правильные банки мне бы ответили гораздо быстрее
предложив её открыть, а не тратить еще стольник на жестянку.
Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.
На последок как оно происходит на форумах
Цитата:
Новичок: Подскажите пожалуста самый крепкий сорт дерева! Весь инет перерыл, поиском пользовался!
Старожил: Объясни, зачем тебе понадобилось дерево? Сейчас оно в строительстве практически не используется.
Новичок: Я небоскрёб собираюсь строить. Хочу узнать, из какого дерева делать перекрытия между этажами!
Старожил: Какое дерево? Ты вообще соображаешь, что говоришь?
Новичок: Чем мне нравиться этот форум — из двух ответов ниодного конкретного. Одни вопросы неподелу!
Старожил: Не нравится — тебя здесь никто не держит. Но если ты не соображаешь, что из дерева небоскрёбы не строят, то лучше бы тебе сначала школу закончить.
Новичок: Не знаите — лучше молчите! У меня дедушка в деревянном доме живёт! У НЕГО НИЧЕГО НЕ ЛОМАЕТСЯ.
Но у него дом из сосны, а я понимаю, что для небоскрёба нужно дерево прочнее! Поэтому и спрашиваю. А от вас нормального ответа недождёшся.
Прохожий: Самое крепкое дерево — дуб. Вот тебе технология вымачивания дуба в солёной воде, она придаёт дубу особую прочность:
Новичок: Спасибо, братан! То что нужно.
Отредактировано модератором: Uchkuma, 26 Апреля, 2011 — 10:21:12
CSS input убрать рамку при фокусе
Далее в стиле фокуса input задаем для атрибутов border, outline и box-shadow (если имеется в стилях input) значение none.
input < border: 1px solid orange; box-shadow: 4px 4px 2px 1px orange; >input:focus
Пример работы input при фокусе или при нажатии рамка вокруг input убирается.
Пример как в input при фокусе (нажатие) убрать везде рамки и оставить рамку только снизу
input < border: 1px solid orange; box-shadow: 4px 4px 2px 1px orange; >input:focus
Как убрать браузерную обводку у различных элементов в состоянии :focus
Верстка
Автор Алексей На чтение 1 мин Просмотров 4.9к. Опубликовано 06.02.2021 Обновлено 06.02.2021
В данной коротенькой статье, приведу готовое решение по тому как убрать браузерную обводку у button, input, textarea, checkbox и прочих элементов верстки появляющуюся в состоянии :focus в различных браузерах: mozilla, google chrome.
:focus ::-moz-focus-outer, ::-moz-focus-inner < border: 0px !important; padding: 0; >a:focus, a:active, button:focus < outline: 0!important; outline-color: transparent!important; outline-width: 0!important; outline-style: none!important; box-shadow: 0 0 0 0 rgba(0,123,255,0)!important; >input, textarea,input:active, textarea:active input[type="checkbox"]:focus, input[type="radio"]:focus
Пишите в комментариях помогло или нет!