Как я могу исправить плавающую метку CSS, которая всегда была активной, показывая «неверный ввод» в моей форме? - PullRequest
Новая
       8

Как я могу исправить плавающую метку CSS, которая всегда была активной, показывая «неверный ввод» в моей форме?

0 голосов
/ 08 января 2019

Я пытаюсь, чтобы вопросы формы опроса имели плавающие метки, которые все еще видны, когда пользователь вводит данные, и после добавления проверки электронной почты с сообщением об ошибке второй вопрос не выполняется. Он отображается как всегда недействительный, даже без ввода.

Я пытался изменить селектор CSS на соседний братский комбинатор, но, хотя изначально это приводит к тому, что мой ярлык находится в правильном месте, он нарушает конкретный стиль input[type="email"]:invalid ~.question-label.

Вот HTML: 

<div class="form-option">
    <input type="email" id="email" class="question-answer" placeholder=" " required>
    <span class="bar"></span>
    <label class="question-label" id="email-label">Email<span class="asterisk"> *</span></label>
    <div class="requirements">
      Must be a valid email address
    </div>
</div>

Вот соответствующий CSS: 

.question-answer:focus ~.question-label, .question-answer:valid ~.question-label {
    top: -16px;
    font-size: 14px;
     color: #4285f4;
}
input[type="email"]:valid + label {
  opacity: 0;
}
.requirements {
  padding-top: 5px;
  font-style: italic;
  color: red;
  opacity: 0;
  display: none;
}
input[type="email"]:invalid {
    background-color: pink;
    transition: ease .25s;
}

input[type="email"]:invalid ~.question-label {
    top: -16px;
    font-size: 14px;
    color: red;
}
input[type="email"]:invalid:focus ~.requirements {
    opacity: 100;
    display: block;
}

Здесь есть полный кодовый указатель: https://codepen.io/Pixel123/pen/NzByep, если проблема требует уточнения.

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

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

Ответы [ 2 ]

0 голосов
/ 08 января 2019

в соответствии с MDN, вы должны попытаться использовать псевдоселекторы :required и :invalid в сочетании с селектором :valid.

Таким образом, когда ваш ввод необходим или недействителен, вы можете применить стиль и удалить его, когда он действителен.

Вот рабочий пример: 

input[type="email"]:required,
input[type="email"]:invalid {
  background-color: pink;
  transition: ease .25s;
}

input[type="email"]:valid {
  background-color: green;
  transition: ease .25s;
}
<div class="form-option">
  <input type="email" id="email" class="question-answer" placeholder=" " required>
  <span class="bar"></span>
  <label class="question-label" id="email-label">Email<span class="asterisk"> *</span></label>
  <div class="requirements">
    Must be a valid email address
  </div>
</div>
0 голосов
/ 08 января 2019

Вам нужно будет использовать селектор :empty и установить цвет фона на выбранный вами цвет; в случае вашей ручки это белый цвет: 

.question-answer:empty {
  background-color: #FFF !important;
}

Чтобы охватить случай, когда метка не переходит как остальные; следуйте той же идее, используя :not:empty, где вы устанавливаете input[type="email"]:invalid.

Ниже приведен рабочий пример; обратите внимание на использование :empty на question-answer. 

    .question-answer:focus ~.question-label, .question-answer:valid ~.question-label {
        top: -16px;
        font-size: 14px;
         color: #4285f4;
    }
    .question-answer:empty {
      background-color: #FFF !important;
    }
    input[type="email"]:valid + label {
      opacity: 0;
    }
    .requirements {
      padding-top: 5px;
      font-style: italic;
      color: red;
      opacity: 0;
      display: none;
    }
    input[type="email"]:invalid {
        background-color: pink;
        transition: ease .25s;
    }

    input[type="email"]:invalid:not:empty ~.question-label {
      top: -16px;
      font-size: 14px;
      color: red;
    }
    input[type="email"]:invalid:focus ~.requirements {
        opacity: 100;
        display: block;
    }
    <div class="form-option">
        <input type="email" id="email" class="question-answer" placeholder=" " required>
        <span class="bar"></span>
        <label class="question-label" id="email-label">Email<span class="asterisk"> *</span></label>
        <div class="requirements">
          Must be a valid email address
        </div>
    </div>
...