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

:disabled , :enabled

Эта кнопка серая. Она не доступна для клика. Как написать селектор на основе состояния элемента?

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 1 августа 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Псевдоклассы :disabled и :enabled помогают стилизовать интерактивные элементы — на которые можно и нельзя нажать.

Легко применяются к любым элементам, которым можно задать атрибут disabled : , , , , , , , и .

Пример

Скопировать ссылку «Пример» Скопировано

Часто требуется, чтобы на кнопку отправки формы нельзя было нажать, пока не заполнены все поля этой формы. Проще всего заблокировать кнопку атрибутом disabled . Но недостаточно просто указать его в HTML, нужно ещё и при помощи оформления показать пользователю, что кнопка не активна. Как раз для этого нам пригодится псевдокласс :disabled .

Кнопка будет полупрозрачной:

 button:disabled  opacity: 0.5;> button:disabled  opacity: 0.5; >

Псевдокласс :enabled , наоборот, поможет стилизовать все доступные для взаимодействия элементы. По факту его чаще всего не указывают, потому что записи с ним и без него, как правило, равноценны: .input = .input : enabled .

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Любому селектору, указывающему на интерактивный элемент, дописываем двоеточие и указываем одно из ключевых слов: enabled или disabled .

Как понять

Скопировать ссылку «Как понять» Скопировано

Браузер ориентируется на атрибут disabled и, в зависимости от его наличия или отсутствия, добавляет элементу состояние enabled — доступен, или disabled — недоступен.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

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

�� enabled чаще всего не используется, потому что все интерактивные элементы по умолчанию доступны (включены). Это значит, что прописав стили для селектора .input , вы закрываете сценарий с активным элементом.

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� «Выключать» взаимодействие с кнопками или другими элементами формы удобнее именно атрибутом disabled , потому что он сразу же отключает возможность нажать на этот элемент без дополнительных стилей. И, ориентируясь на него, гораздо удобнее прописывать стили для неактивных элементов, используя псевдокласс disabled .

Код для кнопки из моего последнего проекта:

Стили для активной кнопки в обычном состоянии:

 .additional-btn  padding: 2rem 3rem; border: 1px solid currentColor; font-family: inherit; font-size: 1.6rem; color: #FF6650; text-decoration: none; background-color: transparent; transition: border 0.3s, color 0.3s; cursor: pointer; user-select: none;> .additional-btn  padding: 2rem 3rem; border: 1px solid currentColor; font-family: inherit; font-size: 1.6rem; color: #FF6650; text-decoration: none; background-color: transparent; transition: border 0.3s, color 0.3s; cursor: pointer; user-select: none; >

Стили для кнопки при наведении курсора или клике:

 .additional-btn:active,.additional-btn:hover  color: #FF5050; transition: none;> .additional-btn:active, .additional-btn:hover  color: #FF5050; transition: none; >

Стили для кнопки, когда она неактивна:

 .additional-btn:disabled  cursor: default; color: #A44234;> .additional-btn:disabled  cursor: default; color: #A44234; >

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

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

Сброс стилей элемента

Если при клике происходит переход на другой URL или изменяется большая часть контента на странице, используйте ссылку ( . );
В остальных случаях подойдет обычная кнопка ( ).

Выбор правильного элемента имеет несколько преимуществ: это SEO-friendly и делает ваш сайт более доступным при работе с клавиатуры и для скринридеров.

Однако разработчики редко используют элемент . На большинстве сайтов кнопки представлены тегами , или . В чем причина такой нелюбви?

Незнание. Некоторые разработчики даже не догадываются, что тег button можно использовать вне форм.
Сложности стилизации. У кнопок очень много стилей по умолчанию, которые мешают созданию кастомного дизайна.

К счастью, у нас есть CSS reset. Давайте сбросим стили кнопки и сделаем ее похожей на обычный текст:

Минус этого подхода заключается в том, что стиль сбросился у ВСЕХ кнопок, и теперь посетитель сайта не сможет опознать их на странице.

Можно воспользоваться препроцессором (SCSS) и написать миксин для использования в нужных местах:

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

Теперь, когда мы удалили все лишнее, давайте определим собственные стили для кнопки. Создадим для этого отдельный класс .btn , который можно будет указать и для button , и для a , и для любого другого элемента.

Внимание: при разработке CSS-компонента кнопки важно учитывать, что он может быть применен к ссылкам. Значит, необходимо изменить также дефолтные свойства ссылок.

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

Проверка коэффициента контраста
Почему контраст так важен?

Стилизация различных состояний

Кнопка уже выглядит неплохо, но кое-чего не хватает. Это интерактивный элемент, имеющий несколько состояний. Мы должны стилизовать и их.

У браузеров есть собственные дефолтные стили для состояний :focus (фокус на кнопке) и :active (нажатие), но часть из них мы уже сбросили. Не забудем также про состояние :hover (наведение курсора).

Для нажатой кнопки создадим олдскульный эффект «утопления» с небольшим изменением насыщенности.
При наведении курсора поменяем местами цвета фона и текста и добавим рамку.
Для обозначения фокусировки используем такой же стиль.

Обратите внимание: стили фокуса очень важны. Многие пользователи по разным причинам пользуются клавиатурой для навигации по странице. Только стилизованный :focus помогает им понять, где они находятся в данный момент.

Только после того как мы позаботились о собственном оформлении фокуса можно убрать у кнопки дефолтные браузерные стили ( outline ).

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

Осталось решить еще одну небольшую проблему.

В ряде браузеров когда вы кликаете на ссылку или кнопку, она получает два псевдокласса: :active и :focus .

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

Это поведение можно пофиксить с помощью нового псевдокласса :focus-visible.

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

При необходимости можно использовать JS-полифилл.

Давайте разделим состояния :hover и :focus в нашем компоненте:

.btn:hover < color: #9050AA; border-color: currentColor; background-color: white; >.btn:focus

Теперь подключим полифилл focus-visible.js. Он добавит элементу body класс js-focus-visible . Используем его, чтобы удалить тень с элементов, у которых нет класса focus-visible (то есть тех элементов, на которых сфокусировались не с клавиатуры):

.js-focus-visible .btn:focus:not(.focus-visible)

Кажется, было бы проще установить стили только для .focus-visible элементов, однако, так мы лишимся фоллбэка на тот случай, если скрипт не сработает.

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

стандартный ресетер для кнопок выглядит как-то так < 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.

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

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

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

Сама рамка устанавливается через универсальное свойство 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
Создание кнопок

Читать:

Плей маркет просит войти в аккаунт гугл что делать