Css сделать ссылку неактивной: Как сделать ссылку неактивной (некликабельной) средствами css?

Leave a Comment / Css / By /

html — как сделать кнопку button неактивной если есть пустые поля input

Вопрос задан

Изменён 5 месяцев назад

Просмотрен 143 раза

Есть HTML страница входа, login и password — поля для ввода, и есть кнопка «войти». Как мне сделать, чтобы если поле login или password пустое, кнопка была неактивной?

Сам код:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>• Login </title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Login</title>
  </head>
  <body>
    <div>
      <div>
        <div>
          <h2>test logins</h2><br>
          <p>Подтверждения личности аккаунта</p>
        </div>
          <form action="login.
 
 php" method="POST">
            <input type="text" name="login" placeholder="Номер телефона или эл. адрес"/>
            <input type="password" name="password"  placeholder="Пароль">
            <button>Войти</button><br><br>
            <a href="https://google.com">Забыли пароль?</a>
          </form>
      </div>
    </div>
  </body>
</html>
<!-- partial -->
  
</body>
</html>
  • html
  • css
  • веб-программирование

2

Можно обойтись чистым CSS’ом 🙂

Я добавил к инпутам атрибут required, а в CSS идёт проверка, если требуемый инпут невалидный (то есть там нет никакой информации), то тогда любой последующей кнопке с классом .login добавлять какие-то стили.

input:required:invalid ~ button.login {
  opacity: .65;
  pointer-events: none;
}
<div>
  <div>
    <div>
      <h2>test logins</h2><br>
      <p>Подтверждения личности аккаунта</p>
    </div>
    <form action="login. php" method="POST">
      <input type="text" name="login" placeholder="Номер телефона или эл. адрес" required />
      <input type="password" name="password"  placeholder="Пароль" required />
      <button>Войти</button><br><br>
      <a href="https://google.com">Забыли пароль?</a>
    </form>
  </div>
</div>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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

…пост будет очень простой коротенький…

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

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

Возникает вопрос: как сделать ссылку Таба неактивной: т.е чтобы при переходе по ссылкам — «открытый таб» (ссылка) становилась неактивной…


 

 

 

 

 

 

Иногда именно в такой постановке задают вопрос начинающие сайтовладельцы! А однажды — админ какого-то поварского сайта — попросила сделать ей для этих целей плагин.

 

Вряд ли стоит, решая такие простые вопросы, создавать (и звучит как-то смешно — создавать)) плагин…

 

 

 

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

 

 

 

Решение достаточно просто! …потребуется всего-то только отыскать в активном шаблоне сайта файл стилей… style.css и не побояться немного поработать!

 

 

 

Итак: нужно отыскать класс css в который завёрнуты ссылки табов.

 

Как это сделать?

 

 

Открываем «консоль для разработчиков» F12 … далее наводим курсор на требуемое окошко (кнопку) таба и… смотрим имя требуемого нам класса.

 

Смотрите стили CSS именно того Таба который в данный момент активен (т.е на который кликнули/перешли)…

 

Смотрите внимательно что к чему; копируете имя селектора… затем — в шаблоне — в файле стилей (через поиск) отыскиваете требуемый…

 

 

Предположим (для примера), у нас будет такой селектор (а следовательно, класс): .tabs-widget-current — всё что нам нужно, так это добавить к этому классу свойство pointer-events:none — оно и сделает ссылку таба неактивной…

 

 

. tabs-widget-current{pointer-events:none}

 

 

Возможно даже добавить для усиления важности свойства pointer-events:none — !important — это на тот случай, если используете дочернюю тему, либо какой-то сторонний плагин табов!…

 

Чтобы не засорять существующий в шаблоне класс стилей, советую организовать отдельный одноимённый селектор… (для некоторых случаев это целесообразнее)

 

 

.tabs-widget-current{pointer-events:none !important}

 

 

 

В финале работ получится примерно так, если смотреть свойства CSS в панели разработчиков (в браузере).

 

 

 

 

 

 

 

Ключевая фраза в селекторе current — обычно отработка табов используется именно в этой css-html связке. Именно по этой примете и ищите!

 

И ещё: помните, в большинстве приличных шаблонов (или плагинов) используются какие-то визуальные эффекты активного/не активного ТАБА — изменение цвета текста ссылки, величины и пр. — то есть обрабатывающие неактивное состояние ссылки таба селекторы css нам в данном случае и нужны!

 

Подобно нынешнему варианту деактивируют ссылки меню и пр. (избавляются от циклических ссылок)

Но, в случае с меню, уже будем работать с файлом функций шаблона functions.php — это, как и говорил, в следующих статьях)

 

 

 

А пока — всё!..

 

 

 

 

 

 

…если что не ясно, пишите… задавайте вопросы в коммах…

 

 


Online консультация по настройкам и созданию сайтов на WordPress

 

 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 

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

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

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

Как отключить ссылки на текущей странице с помощью Pure CSS

Если вы хотите отключить ссылки на текущей странице, прочтите этот фрагмент и попробуйте сами.

Идея следующая — не иметь ссылок на ту же страницу, на которой вы находитесь. Это когда вы видите ссылку, но при нажатии на нее ничего не происходит, потому что она приведет вас на ту же страницу, на которой вы находитесь.

Вы можете отключить ссылку, используя свойство CSS pointer-events, которое указывает, должен ли элемент на странице реагировать или нет при нажатии на него.

Давайте посмотрим на следующий код, который показывает использование событий указателя, где тег отключен с помощью свойство курсора установлено на «по умолчанию»:

  
Отключить ссылку на текущей странице
 
Нажмите здесь
  • Установите для событий указателя значение «none», чтобы элемент никогда не реагировал на события указателя.
  • Установите курсор на его значение по умолчанию, чтобы отключить тег привязки.
 .отключено {
  события-указатели: нет;
  курсор: указатель;
}

Вот полный пример.

Пример отключения ссылки на текущей странице: 

 

  <голова>
    Название документа
    <стиль>
      .неполноценный {
        события-указатели: нет;
        курсор: по умолчанию;
      }
    
  
  <тело>
     
Отключить ссылку на текущей странице
 
    Нажмите здесь

Попробуй сам »

Как видите, хотя это выглядит как ссылка, ничего не происходит, когда мы хотим на нее щелкнуть.

В следующем примере свойства text-decoration и color применяются к тегу

, чтобы ссылка выглядела как отключенная.

Пример отключения ссылки на текущей странице с помощью свойств text-decoration и color: 

 

  <голова>
    Название документа
    <стиль>
      . неполноценный {
        события-указатели: нет;
        курсор: по умолчанию;
        текстовое оформление: нет;
        цвет: #000000;
      }
    
  
  <тело>
     
Отключить ссылку на текущей странице
 
    Нажмите здесь

Попробуй сам »

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

Давайте посмотрим на пример, который показывает разницу между отключенными и активными ссылками.

Пример отключения ссылки на текущей странице с помощью свойства user-select: 

 

  <голова>
    Название документа
    <стиль>
      кнопка,
      кнопка {
        отображение: встроенный блок;
        отступ: 20 пикселей 55 пикселей;
        поля: 20px 10px;
        высота строки: 18px;
        выравнивание текста: по центру;
        пробел: nowrap;
        вертикальное выравнивание: посередине;
        -ms-touch-action: манипулирование;
        touch-action: манипуляция;
        курсор: указатель;
        -webkit-user-select: нет;
        -moz-user-select: нет;
        -ms-user-select: нет;
        выбор пользователя: нет;
        граница: 0;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        радиус границы: 8px;
        цвет фона: #8ebf42;
        текстовое оформление: нет;
        цвет: #ffffff;
      }
      кнопка [отключена].
 
 
 
      кнопка [отключено] {
        курсор: не разрешено;
        непрозрачность: 0,4;
        события-указатели: нет;
        -webkit-touch-выноска: нет;
      }
      a.button:активный:нет([отключено]),
      кнопка: активная: нет ([отключено]) {
        цвет фона: #cccccc;
        цвет: #2a2a2a;
        контур: 0;
      }
    
  
  <тело>
     
Отключить ссылку на текущей странице
 
    Отключено
    Нажмите здесь

Попробуй сам »

Отключение тега ссылки/привязки HTML · Код с Hugo

Вот 2 способа отключить элемент ссылки/привязки HTML с помощью CSS или встроенного JavaScript.

Содержание

Отключить привязку HTML с помощью CSS

события указателя: нет

Чтобы отключить элемент привязки HTML с помощью CSS, мы можем применить стиль событий указателя: нет .

pointer-events: none отключит все события щелчка на якорном элементе.

Например:

 Google.com

событий указателя можно установить с помощью свойств и селекторов CSS: