Как сделать ссылку неактивной css
Перейти к содержимому

Как сделать ссылку неактивной 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; >      

Нужно сделать ссылку не кликабельной! Какой способ лучше всего подойдет?

069.jpg

Сделать её не ссылкой?

lazalu68

Лучше всего подойдёт для чего?

Решения вопроса 3

0xD34F

a.disabled

Ответ написан более трёх лет назад

Нравится 6 3 комментария

pointer-events IE11+

0xD34F

0xD34F, автору вопроса, на всякий случай

UmbrellaCoders

Andy Developer @UmbrellaCoders

PHP, JS Developer

preventDefault

Ответ написан более трёх лет назад

Комментировать

Нравится 1 Комментировать

Зависит от того, где это нужно реализовать, возможно стоит просто не использовать тег ссылки?
Так же можно предотвратить действие браузера по умолчанию:

$('a').click(function(event)< event.preventDefault(); >);

Ответ написан более трёх лет назад

Комментировать

Нравится 1 Комментировать

Ответы на вопрос 0

Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Дробит бекграунд при использовании margin?

  • 1 подписчик
  • час назад
  • 22 просмотра

Как сделать открытую ссылку в Табе неактивной? (некликабельной)

…пост будет очень простой коротенький… Сегодня изучать cms Вордпресс в связке с шаблоном становится всё более немодным! скачивают какие-то бесплатные темы, рихтуют под свои требования… и запускают скороспелые проекты в свет … а уж в процессе (по мере поступления) решают те или иные возникшие вопросы. Не знаю: правильно это, или не правильно – развивать проекты без определённых стартовых знаний… но как бы там ни было, и уж коли возникают вопросы, их следует решать. Нынче (как говорит моя практика) всё больше стараются делать информативные сайты, в том смысле что помещают куда-то в сайдбары достаточно много информации… и, экономя полезное место, комплектуют информацию посредством таб-виджетов, например. Возникает вопрос: как сделать ссылку Таба неактивной: т.е чтобы при переходе по ссылкам – “открытый таб” (ссылка) становилась неактивной…

Как сделать ссылку в открытом Табе неактивной

Иногда именно в такой постановке задают вопрос начинающие сайтовладельцы! А однажды – админ какого-то поварского сайта – попросила сделать ей для этих целей плагин. Вряд ли стоит, решая такие простые вопросы, создавать (и звучит как-то смешно – создавать)) плагин…

показанный ниже вариант, скажем так, относится к визуальным! потому что работаем в данном случае с css , а не с php . (о решении php в следующий раз)

ссылка в Табе неактивная

Решение достаточно просто! …потребуется всего-то только отыскать в активном шаблоне сайта файл стилей… style.css и не побояться немного поработать! Итак: нужно отыскать класс css в который завёрнуты ссылки табов. Как это сделать? Открываем “консоль для разработчиков” F12 … далее наводим курсор на требуемое окошко (кнопку) таба и… смотрим имя требуемого нам класса. Смотрите стили CSS именно того Таба который в данный момент активен (т.е на который кликнули/перешли)… Смотрите внимательно что к чему; копируете имя селектора… затем – в шаблоне – в файле стилей (через поиск) отыскиваете требуемый… Предположим (для примера), у нас будет такой селектор (а следовательно, класс): .tabs-widget-current – всё что нам нужно, так это добавить к этому классу свойство pointer-events:none – оно и сделает ссылку таба неактивной… .tabs-widget-current Возможно даже добавить для усиления важности свойства pointer-events:none – !important – это на тот случай, если используете дочернюю тему, либо какой-то сторонний плагин табов!… Чтобы не засорять существующий в шаблоне класс стилей, советую организовать отдельный одноимённый селектор… (для некоторых случаев это целесообразнее) .tabs-widget-current В финале работ получится примерно так, если смотреть свойства CSS в панели разработчиков (в браузере). Ключевая фраза в селекторе current – обычно отработка табов используется именно в этой css-html связке. Именно по этой примете и ищите! И ещё: помните, в большинстве приличных шаблонов (или плагинов) используются какие-то визуальные эффекты активного/не активного ТАБА – изменение цвета текста ссылки, величины и пр. – то есть обрабатывающие неактивное состояние ссылки таба селекторы css нам в данном случае и нужны! Подобно нынешнему варианту деактивируют ссылки меню и пр. (избавляются от циклических ссылок) Но, в случае с меню, уже будем работать с файлом функций шаблона functions.php – это, как и говорил, в следующих статьях) А пока – всё.

подписка feedburner

…если что не ясно, пишите… задавайте вопросы в коммах…
Online консультация по настройкам и созданию сайтов на WordPress
На этом занавес представления опускается…
…на рампы пыль печальная ложится…

. вопросы в комментариях — помогу, в чём дюжу.
mihalica.ru !

Михаил ATs — владелец блога запросто с Вордпресс — в сети нтернет давным-давно.

. веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети. — заказы, вопросы. разработка.

Как сделать ссылку неактивной после нажатия?

Есть ссылка, при нажатии на которую нужно вывести блок информации и одновременно сделать ссылку неактивной (чтобы ее не было видно). Первый пункт я сделал, а сделать ссылку неактивной не выходит.

Подскажите как это сделать?
Отслеживать
6,488 6 6 золотых знаков 24 24 серебряных знака 31 31 бронзовый знак
задан 19 окт 2016 в 16:09
71 1 1 серебряный знак 5 5 бронзовых знаков

e.preventdefault() есть такая штука которая делает ссылку кликабельной, но не активной, или через сss pointer-events: none;/* делаем ссылку некликабельной */

19 окт 2016 в 16:11

Если я правильно вас понял, вам нужно задать оформление для ссылок псевдокласса :visited — htmlbook.ru/css/visited

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *