Как убрать стили у кнопки css

Как убрать рамку у кнопок?

По умолчанию, браузер добавляет к кнопкам рамку, которая меняет свой стиль при изменении цвета фона кнопки. Вот как выглядит такая кнопка.

Сама рамка устанавливается через универсальное свойство border, оно одновременно определяет толщину рамки, её стиль и цвет. Соответственно, чтобы у кнопки убрать рамку есть три способа:

• задать нулевую толщину рамки;
• указать стиль рамки как none или hidden ;
• установить прозрачный цвет рамки.

Толщина рамки

Используем свойство border-width с нулевым значением или универсальное border (пример 1).

Пример 1. Нулевая толщина рамки

Стиль рамки

За стиль рамки отвечает свойство border-style или, опять же, универсальное border . В качестве значения указываем none или hidden (пример 2).

Пример 2. Меняем стиль рамки

Значения none и hidden дают одинаковый результат, но имеют небольшие отличия, которые проявляются только при создании линий в таблицах. Для кнопок эти значения равнозначны.

Прозрачный цвет

В CSS для прозрачного цвета зарезервировано ключевое слово transparent . Так что для рамки пишем свойство border-color или border с этим значением.

Прозрачный цвет рамки удобно задавать в ситуациях, когда рамка меняет свой цвет при наведении на кнопку курсора мыши или при щелчке по кнопке (пример 3).

Пример 3. Цвет рамки

В данном примере сперва задаём параметры рамки, но делаем её прозрачной через transparent . Затем в псевдоклассе :hover устанавливаем желаемый цвет рамки, который будет проявляться при наведении на кнопку.

См. также

• border-bottom-color
• border-color
• border-left-color
• border-right-color
• border-top-color
• Атрибуты
• Граница в CSS
• Кнопки
• Кнопки
• Кнопки в Bootstrap 4
• Создание кнопок

Как убрать фон у кнопки?

стандартный ресетер для кнопок выглядит как-то так < margin: 0; padding: 0; border: 0; outline: none; background-color: transparent; >дальше уже сами решайте что из этого является причиной ваших проблем.

17 фев 2018 в 20:37

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

body < background-color: #808080; >button < outline: none; /* Для синий ободки */ border: 0; background: transparent; >

Отслеживать
ответ дан 17 фев 2018 в 20:34
13.1k 2 2 золотых знака 21 21 серебряный знак 37 37 бронзовых знаков
Что за день, почему постоянно минусы?))
17 фев 2018 в 20:39
кому-то перешли дорогу))
17 фев 2018 в 22:12

button

Отслеживать
ответ дан 22 дек 2022 в 11:23
kirill-petrov kirill-petrov
1 1 1 бронзовый знак

пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править

22 дек 2022 в 12:00

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.8.3130

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

:disabled

CSS псевдокласс :disabled находит любой отключённый элемент. Элемент отключён, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включённое состояние, когда его можно активировать или сфокусировать.

Примеры

Пример селекторов

Выберет все отключённые поля ввода

Найдёт все отключённые select элементы с классом country

Пример использования

input[type="text"]:disabled  background: #ccc; > 

Применим к этому HTML5 фрагменту:

form action="#"> fieldset> legend>Адрес доставкиlegend> input type="text" placeholder="Имя" /> input type="text" placeholder="Адрес" /> input type="text" placeholder="Почтовый индекс" /> fieldset> fieldset id="billing"> legend>Адрес оплатыlegend> label for="billing_is_shipping">Такой же как адрес доставки:label> input type="checkbox" onchange="javascript:toggleBilling()" checked /> br /> input type="text" placeholder="Имя" disabled /> input type="text" placeholder="Адрес" disabled /> input type="text" placeholder="Почтовый индекс" disabled /> fieldset> form> 

Добавим немного javascript:

function toggleBilling()  var billingItems = document.querySelectorAll('#billing input[type="text"]'); for (var i = 0; i  billingItems.length; i++)  billingItems[i].disabled = !billingItems[i].disabled; > > 

Результатом будет отключение всех полей в группе адреса оплаты и окраска их в серый цвет.

Спецификации

Specification
HTML Standard # selector-disabled
Selectors Level 4 # enableddisabled

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Стилизуем кнопки правильно

Если вы создаёте сайт или веб-приложение, там наверняка есть кнопки. А может быть ссылки, выглядящие как кнопки? В любом случае важно правильно их сделать.

Этап 1: Сброс стилей у .
Этап 2: Создание CSS-компонента «button».
Этап 3: Стилизация активного, ховер- и фокус-состояния.
Этап 4: Разбираемся с прилипшим фокусом.

Сброс стилей у

1. Если при клике открывается другая страница или изменяется большая часть контента на странице — используйте ссылку ( … ).
2. В остальных случаях используйте обычную кнопку ( … ).

Использование правильного элемента имеет ряд преимуществ: это благоприятно для SEO (особенно для ссылок!), хорошо для навигации с клавиатуры и улучшает доступность для всех пользователей.

Несмотря на это, разработчики редко используют . По всему интернету можно встретить кучу кнопок, которые вызывают действия через JavaScript, но на деле оказывается, что это , или .

Почему же так редко используется?

• Знание: многие разработчики просто не знают о нём (выучить более 100 HTML-элементов не так-то просто).
• Стилизация: по умолчанию у сложные стили, из-за которых трудно добиться собственного вида.

К счастью, стилизацию поправить не так уж сложно!

/**   * Сброс стилей у кнопки.   * Придётся немного поработать, чтобы получить нейтральный вид.   */ button   padding: 0;  border: none;  font: inherit;  color: inherit;  background-color: transparent;  /* отображаем курсор в виде руки при наведении; некоторые   * считают, что необходимо оставлять стрелочный вид для кнопок   */  cursor: pointer; >

В итоге мы получаем кнопки, которые выглядят как обычный текст.

Минус в том, что при таком подходе необходимо стилизовать все кнопки, или пользователь не распознает их (см.: возможности). Ещё один вариант — использовать этот стиль как миксин (Sass или другой препроцессор) и применять его выборочно:

@mixin button-reset   padding: 0;  border: none;  font: inherit;  color: inherit;  background-color: transparent;  cursor: pointer; > .my-custom-button   @include button-reset;  padding: 10px;  background-color: skyblue; >

button type="button">  У меня браузерные стили по-умолчанию. button> button type="button" class="my-custom-button">  А я использую собственные стили. button>

Создание CSS-компонента «button»

Теперь, когда мы сбросили дефолтные стили, можем приступить к написанию своих. Вот что мы сделаем:

• «кнопочный» стиль, который можно применять и к ссылкам и кнопкам;
• применять мы хотим выборочно, потому что у нас есть другие ссылки и кнопки с разными стилями на странице.

Напрашивается CSS-компонент. CSS-компонент — это стиль или набор стилей, которые применяются, используя классы, к различным типам HTML-элементов. Вам должно быть знакомо это понятие, если вы используете CSS-фреймворки Bootstrap или Foundation.

Назовём этот компонент .btn (как в Bootstrap, но мы ограничимся одним цветом и размером, чтобы было проще).

.btn   /* по-умолчанию для , но пригодится для */  display: inline-block;  text-align: center;  text-decoration: none;  /* создаём маленькие отступы, если кнопки перенесутся на две строки */  margin: 2px 0;  /* невидимая граница (понадобится для цвета при наведении/фокусе) */  border: solid 1px transparent;  border-radius: 4px;  /* размер строится из текста и отступов (без width/height) */  padding: 0.5em 1em;  /* убедитесь, что достаточно контраста! */  color: #ffffff;  background-color: #9555af; >

Вот что у нас получилось:

Вам, возможно, интересно, почему контраст так важен. Ведь кнопки на второй строке выглядят красиво: кому не нравятся пастельные цвета?

Проще говоря: с хорошим контрастом, вы охватите больше пользователей. Некоторые пользователи — слабовидящие. Другие могут просматривать ваш сайт с телефона, на ходу, а под дневным светом труднее читать. Вы можете проверить коэффициент контрастности и почитать о контрастности текста.

Стилизация активного, ховер- и фокус-состояния

Круто, когда ваша кнопка выглядит красиво, но… пользователи будут взаимодействовать с ней, и поэтому требуется визуальный отклик, когда состояние кнопки изменяется.

У браузеров свои стили по-умолчанию для «активного» (т.е. нажатого) и «фокусного» состояния, но, сбросив стили у кнопки, мы избавились от некоторых из них. Не хватает ещё стилей при наведении мышкой, да и в целом хочется, чтобы все стили были видны и соответствовали нашему дизайну.

Начнём со стилей для состояния :active, которое срабатывает при клике кнопки или ссылки:

/* олдскульный эффект «нажатия» + цветовые правки */ .btn:active   transform: translateY(1px);  filter: saturate(150%); >

Мы могли бы изменять цвет кнопки, но я хочу использовать этот эффект при наведении:

/* инвертируем цвета при наведении */ .btn:hover   color: #9555af;  border-color: currentColor;  background-color: white; >

Давайте добавим теперь и фокусные стили. Пользователи вашего сайта или веб-приложения могут использовать обычную или виртуальную клавиатуру (на iOS и Android), чтобы «сфокусировать» и активировать поле в форме, кнопки, ссылки и другие интерактивные элементы.

• Для некоторых пользователей это ускоряет заполнение форм.
• Для других использование мышки или тач-указателя невозможно или затруднительно. Они пользуются клавиатурой или специальным устройством.

Во многих веб-проектах, которые я видел, дизайнеры задают стили только для наведения мышки, но не для фокуса. Что же нам делать? Простое решение — использовать :hover стили для :focus.

/* инвертируем цвета при наведении и фокусе */ .btn:hover, .btn:focus   color: #9555af;  border-color: currentColor;  background-color: white; >

И когда у нас будут стили для фокуса (только не до!), мы можем сбросить браузерные стили для кнопки:

.btn   /* . */  /* все браузеры: сбрасываем дефолтный outline,   так как у нас уже есть собственные стили */  outline: none; > /* Firefox: сбрасываем внутреннюю границу при фокусе */ .btn::-moz-focus-inner   border: none; >

Попробуйте сами: если вы за компьютером, используйте Tab и Shift+Tab для навигации между кнопками:

Разбираемся с прилипшим фокусом

Есть небольшой недочёт. В некоторых браузерах, если кликнуть по ссылке или кнопке, применяются два псевдокласса:

«Активный» псевдокласс убирается сразу после того, как отпускается кнопка мыши или трекпада после нажатия. Но в некоторых браузерах после этого остаётся :focus стиль, пока пользователь не кликнет где-нибудь на странице.

В моих тестах, такое происходит в Chrome (66), Edge (16), и Firefox (60, только для ссылок). Safari (11.1), кажется, поумнее, и там нет такой проблемы.

Мы можем исправить это, используя новый псевдокласс :focus-visible (черновик спецификации). Этот элемент ещё не полностью проработан, но идея в том, что браузеры должны применять состояние :focus-visible только при взаимодействии с клавиатуры или подобных устройств, а не при клике.

Так как :focus-visible ещё не внедрён в браузеры, нам придётся использовать решение на JavaScript, такой как этот полифилл. Он действует по всей странице и добавляет класс focus-visible только элементам, которые получают фокус при использовании клавиатуры.

Давайте изменим стили, чтобы отделить стили :hover от стилей :focus.

/* инвертируем цвета при наведении */ .btn:hover   color: #9050aa;  border-color: currentColor;  background-color: white; > /* убеждаемся, что есть видимые границы при фокусе */ .btn:focus   outline: none;  box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.5), 0 0 0 1.5px rgba(255, 105, 180, 0.5); >

Теперь, после того как мы подключили к странице focus-visible.js, он будет добавлять класс js-focus-visible элементу .* Мы можем использовать это, чтобы убрать стили фокуса с элементов, которые не имеют класс _focus-visible*:

/* скрываем фокусные стили, если используется не клавиатура */ .js-focus-visible .btn:focus:not(.focus-visible)   box-shadow: none; >

Более простой способ — определить фокусные стили только для класса focus-visible, но если полифилл неактивен (например, если JS не смог загрузится), то стили не применятся.

Окончательный вариант можно посмотреть на сайте Флоренса Вёршелда.

Следить за обновлениями можно через RSS или телеграм-канал.