HTML Примеры CSS Примеры JavaScript Примеры КАК Примеры SQL Примеры Python Примеры W3.CSS Примеры Bootstrap Примеры PHP Примеры Java Примеры XML Примеры jQuery Примеры
Форум |
О SchoolsW3
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания.
Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять
Условия к использованию,
Cookies и политика конфиденциальности.
Авторское право 1999- Все права защищены. SchoolsW3 работает на площадке от SW3.CSS.
:disabled, :enabled — CSS — Дока
Кратко
Пример
Как пишется
Как понять
Подсказки
На практике
Алёна Батицкая советует
Кратко
Скопировано
Псевдоклассы :disabled и :enabled помогают стилизовать интерактивные элементы — на которые можно и нельзя нажать.
Легко применяются к любым элементам, которым можно задать атрибут disabled: <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> и <input>.
Пример
Скопировано
Часто требуется, чтобы на кнопку отправки формы нельзя было нажать, пока не заполнены все поля этой формы. Проще всего заблокировать кнопку атрибутом disabled
. Но недостаточно просто указать его в HTML, нужно ещё и при помощи оформления показать пользователю, что кнопка не активна. Как раз для этого нам пригодится псевдокласс :disabled.
Псевдокласс :enabled, наоборот, поможет стилизовать все доступные для взаимодействия элементы. По факту его чаще всего не указывают, потому что записи с ним и без него, как правило, равноценны: .input = .input:enabled.
Как пишется
Скопировано
Любому селектору, указывающему на интерактивный элемент, дописываем двоеточие и указываем одно из ключевых слов: enabled или disabled.
Как понять
Скопировано
Браузер ориентируется на атрибут disabled и, в зависимости от его наличия или отсутствия, добавляет элементу состояние enabled — доступен, или disabled — недоступен.
Подсказки
Скопировано
💡 Даже если дизайнер забыл про неактивное состояние, обязательно прописывайте его в стилях, чуть приглушая фоновый цвет или делая элемент полупрозрачным — чтобы пользователь точно знал, что с этим элементом взаимодействовать нельзя.
💡 enabled чаще всего не используется, потому что все интерактивные элементы по умолчанию доступны (включены). Это значит, что прописав стили для селектора .input, вы закрываете сценарий с активным элементом.
На практике
Скопировано
Алёна Батицкая советует
Скопировано
🛠 «Выключать» взаимодействие с кнопками или другими элементами формы удобнее именно атрибутом
disabled, потому что он сразу же отключает возможность нажать на этот элемент без дополнительных стилей. И, ориентируясь на него, гораздо удобнее прописывать стили для неактивных элементов, используя псевдокласс disabled.
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
←
:checked
ctrl + alt + ←
→
:in-range, :out-of-range
ctrl + alt + →
кнопок · Bootstrap
Используйте настраиваемые стили кнопок Bootstrap для действий в формах, диалоговых окнах и т. д. с поддержкой нескольких размеров, состояний и т. д.
Примеры
Bootstrap включает в себя несколько предопределенных стилей кнопок, каждый из которых служит своей собственной семантической цели, с добавлением нескольких дополнений для большего контроля.
Передача значения вспомогательным технологиям
Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only .
Бирки для кнопок
.btn 9Классы 0014 предназначены для использования с элементом
. Однако вы также можете использовать эти классы для элементов или (хотя некоторые браузеры могут применять несколько иное отображение).
При использовании классов кнопок в элементах , которые используются для запуска функций на странице (например, свертывания содержимого), а не для ссылки на новые страницы или разделы на текущей странице, этим ссылкам следует присвоить role="button" , чтобы надлежащим образом передать их назначение вспомогательным технологиям, таким как программы чтения с экрана.
Нужна кнопка, но не яркие цвета фона, которые они приносят? Замените классы модификаторов по умолчанию на .btn-outline-* для удаления всех фоновых изображений и цветов на любой кнопке.
Размеры
Хотите большие или маленькие пуговицы? Добавьте .btn-lg или .btn-sm для дополнительных размеров.
Создайте кнопки уровня блока — те, которые охватывают всю ширину родителя — путем добавления .btn-block .
Кнопки будут казаться нажатыми (с более темным фоном, более темной рамкой и вложенной тенью), когда они активны. Нет необходимости добавлять класс к , поскольку они используют псевдокласс . Тем не менее, вы все равно можете форсировать такой же активный внешний вид с помощью .active (и включить атрибут aria-pressed="true" ), если вам нужно программно реплицировать состояние.
Чтобы кнопки выглядели неактивными, добавьте логический атрибут disabled к любому элементу .
Отключены кнопки с помощью элемент ведет себя немного иначе:
s не поддерживают атрибут disabled , поэтому необходимо добавить класс . disabled , чтобы он визуально отображался отключенным.
Некоторые стили, ориентированные на будущее, включены для отключения всех событий указателя на кнопках привязки. В браузерах, поддерживающих это свойство, вы вообще не увидите отключенный курсор.
Кнопки Disabled должны включать aria-disabled="true" атрибут для указания состояния элемента вспомогательным технологиям.
Класс .disabled использует событий указателя: нет , чтобы попытаться отключить функциональность ссылки s, но это свойство CSS еще не стандартизировано. Кроме того, даже в браузерах, поддерживающих pointer-events: none , навигация с помощью клавиатуры остается неизменной, а это означает, что зрячие пользователи клавиатуры и пользователи вспомогательных технологий по-прежнему смогут активировать эти ссылки. Поэтому, чтобы быть в безопасности, добавьте к этим ссылкам атрибут tabindex="-1" (чтобы они не получали фокус клавиатуры) и используйте пользовательский JavaScript, чтобы отключить их функциональность.
Плагин кнопки
Делайте больше с помощью кнопок. Управляйте состояниями кнопок или создавайте группы кнопок для дополнительных компонентов, таких как панели инструментов.
Переключить состояния
Добавьте data-toggle="button" для переключения активного состояния кнопки. Если вы предварительно переключаете кнопку, вы должны вручную добавить .active class и aria-pressed="true" к .
Флажок и радиокнопки
Bootstrap’s 9Стили 0013 .button можно применять к другим элементам, таким как s, чтобы обеспечить переключение флажков или радиокнопок. Добавьте data-toggle="buttons" в .btn-group , содержащую эти измененные кнопки, чтобы включить их поведение переключения через JavaScript, и добавьте .btn-group-toggle , чтобы стилизовать s в вашем кнопки. Обратите внимание, что вы можете создавать отдельные кнопки с питанием от ввода или их группы.
Проверенное состояние для этих кнопок обновляется только через нажатие событие на кнопке. Если вы используете другой метод для обновления ввода — например, с помощью или путем ручного применения свойства ввода checked — вам потребуется переключить .active на вручную.
Обратите внимание, что кнопки с предварительной отметкой требуют, чтобы вы вручную добавили класс .active к входу .
Проверено
<метка>
Отмечено
Активный
Радио
Радио
<метка>
Активен
<метка>
Радио
<метка>
Радио
Методы
Метод
Описание
$(). кнопка('переключатель')
Переключает состояние отправки. Создает впечатление, что кнопка активирована.
$().кнопка('удалить')
Уничтожает кнопку элемента.
Кнопки | Праймер CSS
Стабильный
Доступность не проверена
Источник
На этой странице
Кнопки используются для действий , как и в формах, а текстовые гиперссылки используются для пунктов назначения или перехода с одной страницы на другую.
Примечание. При использовании элемента , всегда указывайте тип .
Типы кнопок
По умолчанию
Используйте стандартные — но стильные — . btn для действий формы и общих действий страницы. Они широко используются на сайте.
Основные
Основные кнопки зеленого цвета и используются для обозначения основных действий на странице. Если вам нужно, чтобы ваши кнопки выделялись, используйте .btn.btn-primary . Вы можете использовать его с кнопками обоих размеров — просто добавьте .btn-primary .
Outline
Кнопки Outline преуменьшают действие, поскольку они выглядят как прямоугольные ссылки. Просто добавьте .btn-контур и вперед.
Опасность
Кнопки опасности красные. Они помогают повторить, что предполагаемое действие важно или потенциально опасно (например, удаление репо или передача права собственности). Подобно основным кнопкам, просто добавьте .btn-danger .
Selected
Добавление атрибута aria-selected="true" сохранит кнопку в выбранном состоянии. Обычно используется для BtnGroups .
<дел>
<дел>
Отключено
Отключено и элементов с атрибутом aria-disabled="true" .
Далее к размеру по умолчанию есть еще .btn-sm (маленький) и .btn-large 9вариант 0014. Используйте их, чтобы уменьшить или увеличить размер кнопки. Это полезно для установки кнопки рядом с входом или превращения кнопки в заметный призыв к действию в основных разделах.
При необходимости можно использовать утилиты масштабирования шрифта для изменения размера шрифта. Отступы применяются в em так, чтобы они масштабировались пропорционально размеру шрифта.
Использование .btn-large с утилитой масштабирования шрифта для преобразования текста в больший размер.
Сделайте любую кнопку полной ширины, добавив .btn-block . Он добавляет ширину : 100%; изменяет отображение с inline-block на block и центрирует текст кнопки.
Кнопка ссылки
Создайте кнопку, похожую на ссылку с .btn-ссылка . Вместо того, чтобы использовать для запуска JS, этот стиль на следует использовать для лучшей доступности.
Класс .btn-link не предназначен для использования с .btn ; перекрывающиеся стили несовместимы.
Невидимая кнопка
Когда вам нужна ссылка, но вы хотите он дополнен, а линия увеличена, как кнопка, которая лучше всего подходит для действий «отмены» в формах.
Кнопка скрытого текста
Используйте .hidden-text-expander для указания и переключения скрытого текста.
<диапазон>
Вы также можете сделать расширитель встроенным добавив .встроенный .
Кнопки только со значками .btn-octicon становятся синими при наведении. Используйте .btn-octicon -danger , чтобы при наведении значок становился красным.0003
w3.org/2000/svg" viewBox="0 0 16 16">
Кнопка закрытия
Когда используя значок
octicon-x для кнопки закрытия, добавьте .close-button , чтобы удалить стили кнопок по умолчанию.
w3.org/ 2000/svg" viewBox="0 0 16 16">
Кнопка со счетчиками
Вы можете легко добавить счетчик к маленькой кнопке . Добавьте класс .btn-with-count к .btn-sm , а затем добавьте .social-count после кнопки. Обязательно очистите число с плавающей запятой, добавленное дополнительным классом