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

: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 7 авг. 2023 г. 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– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

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

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

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

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

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

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

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

Использование правильного элемента имеет ряд преимуществ: это благоприятно для 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

Создание 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

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

/* инвертируем цвета при наведении */ .btn:hover

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

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

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

/* инвертируем цвета при наведении и фокусе */ .btn:hover, .btn:focus

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

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

Попробуйте сами: если вы за компьютером, используйте 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

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

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

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

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

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