Как убрать обводку кнопки css
Как убрать обводку при клике на input
При клике и фокусе на input появляется обводка. Как её убрать?
9 ответов 9
Этот же приём убирает обводку пунктиром вокруг нажатой ссылки и вокруг любого из элементов формы.
Попробуйте поставить box-shadow: none; У меня была такая проблема. Я просто сделал так при использовании Bootstrap
У меня была такая проблема. Я просто сделал так:
Примените свойство outline:none
Конкретно для input и конкретно при фокусе на нем:
Проверял на Chrome.
Попробуйте поставить box-shadow: none;
Допишите также onFocus=»this.blur()»
Лучше всего сделать элемент A поверх всей надписи, тогда заслонять надпись ничего не будет и выглядеть будет отлично.
Спросил myRoot,
19 февраля 2014
Вопрос
myRoot
Тег Button по умолчанию имеет рамку.
button
Помогло. Но в фокусе всё равно появляется рамка.
Псевдокласс не помогает
Ссылка на комментарий
Поделиться на других сайтах
1 ответ на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации
Все привет.
Использую bootstrap 3, хотя это наверно и не существенно. Необходимо сделать, чтобы у активных кнопок внизу был указатель, как на картинке. Кнопка любого цвета с любой границей, с иконками и текстом. Но проблема именно с треугольником внизу у активной кнопки.
Не знаю, как к этому подступиться. Толкните в нужном направлении, спасибо.
Как убрать обводку кнопки?
После нажатия на нее в ie, она обводится так как на картинке. Как убрать это? В стилях я указал, что обводку делать не надо, на браузер все равно обводит ее.
3 ответа 3
Существует такой атрибут как outline в css. Он отвечает за ободку вокруг button/input/textarea/.
Это у вас устанавливается фокус на кнопке, чтобы снять его или установить на другой элемент, нужный вам, используйте ниже приведённый JS. На javascript установить и снять фокус будет так:
С помощью установки курсора вы можете указывать после каких действий можно нажать например просто энтер, дабы не тянуться пользователю за мышкой.
Вроде как и в Хроме с Сафари поставит outline:none
Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript html css или задайте свой вопрос.
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.22.41046
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как убрать обводку у input и textarea в Сафари и Хроме?
Очень просто. В таблице стилей пропишите для input и textarea следущее
А теперь поместим курсор в поле ввода.
Выглядит немного неаккуратно, неправда ли?
Это же свойство можно использовать, если надо избавиться от рамки вокруг ссылок при фокусе на них. Чтобы, например, не портить «красоту» меню. 
Хотя убирать outline и неправильно. При навигации по сайту с помощью только клавиатуры эта рамочка помогает понять, на каком элементе сейчас фокус.
Кликните поочередно на ссылки или используйте клавишу TAB, чтобы навести фокус на них:
обводка есть / обводка убрана
Как убрать обводку у input и textarea в Сафари и Хроме?: 15 комментариев
Если убрать обводку, то надо предложить что-нибудь в замен. А то будет не понятно, какое поле в фокусе в данный момент (что особенно плохо, когда переключаются через tab).
а кто ж мешает: всего лишь менять класс по focus/blur у «родителя» (КО к вашим услугам). а топик о том, как убрать обводку, а не улучшить удобство =)
Уважаемые подсажите как избавиться от этой проблемы но только в opera?
а в чем проблема? если еще актуально. и какая опера?
Вот спасибо. Отличная статейка. А то млин бился со стилями, и border: none, и border:0px; ничего не помогало. Конечно для просто для inputa прокатывает, а вот для input:hover, нифига.
Узнайте, как стиль кнопок с помощью CSS.
Основные стили кнопок
Кнопка по умолчанию Кнопка CSS
Пример
Цвета кнопок
Используйте свойство background-color для изменения цвета фона кнопки:
Пример
Размеры кнопок
Используйте свойство font-size для изменения размера шрифта кнопки:
Пример
Используйте свойство padding для изменения заполнения кнопки:
10px 24px 12px 28px 14px 40px 32px 16px 16px
Пример
Закругленные кнопки
Используйте свойство border-radius для добавления скругленных углов к кнопке:
Пример
Цветные границы кнопок
Пример
Наведите кнопки
Используйте селектор :hover для изменения стиля кнопки при наведении на нее указателя мыши.
Совет: Используйте свойство transition-duration для определения скорости эффекта «Hover»:
Пример
.button <
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
>
.button:hover <
background-color: #4CAF50; /* Green */
color: white;
>
.
Кнопки теней
Use the box-shadow property to add shadows to a button:
Пример
.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>
.button2:hover <
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>
Отключенные кнопки
Используйте свойство opacity для добавления прозрачности к кнопке (создает «отключенный» вид).
Совет: Вы также можете добавить свойство cursor со значением «not-allowed», которое будет отображать «нет парковки знак» при наведении указателя мыши на кнопку:
Пример
Ширина кнопки
По умолчанию размер кнопки определяется по ее текстовому содержимому (так же широко, как и ее содержимое). Используйте свойство width для изменения ширины кнопки:
Пример
Группы кнопок
Удалите поля и добавьте float:left к каждой кнопке, чтобы создать группу кнопок:
Пример
Группа кнопок на границе
Используйте свойство border для создания группы кнопок с рамками:
Пример
Вертикальная группа кнопок
Используйте display:block вместо float:left для группирования кнопок ниже друг друга, вместо того, чтобы бок о бок: