Поле формы HTML не будет содержать псевдокласс - PullRequest
Новая
       0

Поле формы HTML не будет содержать псевдокласс

0 голосов
/ 06 июня 2018

У меня есть следующая форма: 

body {
  background: #fff;
  color: 404040
}

form {
  display: block;
  position: relative;
  width: 80%;
  background: #f9f9f9;
  margin: 10px auto;
  padding: 30px;
}

label {
  display: block;
  position: relative;
  top: -20px;
  left: 0px;
  color: #999;
  font-family: 'Helvetica', sans-serif;
  font-size: 16px;
  z-index: 1;
  transition: all 0.3s ease-out;
}

input,
input:optional {
  display: block;
  position: relative;
  background: none;
  border: none;
  border-bottom: 1px solid #ddd;
  width: 100%;
  font-family: 'Helvetica', sans-serif;
  font-weight: bold;
  font-size: 16px;
  z-index: 2;
}

input:focus,
input:valid {
  outline: none;
  border-bottom: 1px solid #00aced;
}

input:focus+label,
input:required:valid+label {
  top: -40px;
  font-size: 11px;
  color: #00aced;
}

.divider {
  position: relative;
  height: 30px;
  width: auto;
  background: none;
}

#hex1 {
  width: 75px;
  margin: 10px auto;
}

.headline {
  margin-left: 100px;
  font-size: 24px;
}

.submitBtn {
  width: 250px;
  height: 75px;
  border-radius: 3px;
  background: #37afac;
  margin: 0 auto;
  color: #fff
}

#title {
  margin-top: -60px;
  margin-left: 80px;
  margin-bottom: 20px;
}
<form>
  <h3>Details about the person you are reporting:</h3>
  <div class='divider'></div>
  <input type="text" name="firstname" required autocomplete="off" />
  <label for="firstname">First Name</label>
  <div class='divider'></div>
  <input type="text" name="lastname" required autocomplete="off" />
  <label for="lastname">Last Name</label>
  <div class='divider'></div>
  <input type="text" name="age" class="test" autocomplete="off" />
  <label for="age">Age</label>
  <div class='divider'></div>
  <input type="text" name="gender" required autocomplete="off" />
  <label for="gender">Gender</label>
  <div class='divider'></div>
  <input type="text" name="address 1" autocomplete="off" />
  <label for="address1">Address 1</label>
  <div class='divider'></div>
  <input type="text" name="address 2" autocomplete="off" />
  <label for="address2">Address 2</label>
  <div class='divider'></div>
  <input type="text" name="city" required autocomplete="off" />
  <label for="city">City</label>
  <div class='divider'></div>
  <input type="text" name="state" required autocomplete="off" />
  <label for="state">State</label>
  <div class='divider'></div>
  <input type="text" name="position" autocomplete="off" />
  <label for="Position">Position (coach, referee, etc)</label>
  <div class='divider'></div>
  <input type="text" name="program" required autocomplete="off" />
  <label for="Program">Program where individual works</label>
  <div class='divider'></div>
  <input type="text" name="IncidentDescription" required autocomplete="off" />
  <label for="IncidentDescription">Incident description</label>
  <div class='divider'></div>
  <input type="text" name="IncidentLocation" required autocomplete="off" />
  <label for="IncidentLocation">Incident location</label>
  <div class='divider'></div>

Codepen: https://codepen.io/anon/pen/PazrBw

Когда каждый вход получает фокус, он анимируется через получение класса в css.Используя базовую проверку html5, он должен сохранить этот класс, чтобы показать, что он правильно заполнен.

Моя проблема в том, что мне нужны некоторые поля, которые не требуются.Если поля не помечены как обязательные, форма автоматически применяет некоторые из псевдоклассов: valid (синие подчеркивания).Еще большая проблема заключается в том, что когда он теряет фокус, он теряет этот класс и сворачивает метку обратно во входной текст.

Что мне здесь не хватает?спасибо!

1 Ответ

0 голосов
/ 07 июня 2018

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

Я предлагаю использовать :placeholder-shown селектор вместо :valid.Таким образом, пустые необязательные поля больше не будут выделяться.

Чтобы это работало, вам сначала нужно добавить placeholder=" " к своим входам.Это выглядит немного странно, потому что таким образом вы теряете возможность использовать заполнители в случае необходимости, но помните, что вы уже говорите «нет» использованию заполнителей, помещая метки на их место (ну, если вам когда-нибудь понадобится включать заполнители дляради доступности сделайте это, и вместо пустых заполнителей поместите реальные, затем скройте их с помощью CSS. Другая тема, в другой раз).

:placeholder-shown не имеет поддержки IE / old browser, поэтому мы будемВот хороший пример прогрессивного улучшения:

Текст метки будет уже свернут и расположен по умолчанию над вводом (то есть top: -40px; font-size: 11px;), чтобы он не мешал вводу пользователем.Я считаю, что это достаточно для IE / старых браузеров.

Затем мы добавим приятный анимационный эффект для браузеров, которые поддерживают :placeholder-shown, включив следующие стили: 

input:not(:focus):placeholder-shown + label {
  top: -20px;
  font-size: 16px;
}

:not(:focus)необходимо изменить размер и переместить метку, как только пользователь сфокусирует ввод, потому что некоторые браузеры показывают заполнитель даже после фокуса (и скрывают его только после того, как пользователь начинает печатать). 

body {
  background: #fff;
  color: 404040
}

form {
  display: block;
  position: relative;
  width: 80%;
  background: #f9f9f9;
  margin: 10px auto;
  padding: 30px;
}

label {
  display: block;
  position: relative;
  /* top: -20px; */
  top: -40px;
  left: 0px;
  color: #999;
  font-family: 'Helvetica', sans-serif;
  /* font-size: 16px; */
  font-size: 11px;
  z-index: 1;
  transition: all 0.3s ease-out;
}

input/*,
input:optional */ {
  display: block;
  position: relative;
  background: none;
  border: none;
  border-bottom: 1px solid #ddd;
  width: 100%;
  font-family: 'Helvetica', sans-serif;
  font-weight: bold;
  font-size: 16px;
  z-index: 2;
}

input:focus/*,
input:valid*/ {
  outline: none;
  border-bottom: 1px solid #00aced;
}

input:focus+label/*,
input:required:valid+label*/ {
  color: #00aced;
}

/* New styles >> */
input:not(:focus):placeholder-shown + label {
  top: -20px;
  font-size: 16px;
}
/* << */

.divider {
  position: relative;
  height: 30px;
  width: auto;
  background: none;
}

#hex1 {
  width: 75px;
  margin: 10px auto;
}

.headline {
  margin-left: 100px;
  font-size: 24px;
}

.submitBtn {
  width: 250px;
  height: 75px;
  border-radius: 3px;
  background: #37afac;
  margin: 0 auto;
  color: #fff
}

#title {
  margin-top: -60px;
  margin-left: 80px;
  margin-bottom: 20px;
}
<form>
  <h3>Details about the person you are reporting:</h3>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="firstname" required autocomplete="off" />
  <label for="firstname">First Name</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="lastname" required autocomplete="off" />
  <label for="lastname">Last Name</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="age" class="test" autocomplete="off" />
  <label for="age">Age</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="gender" required autocomplete="off" />
  <label for="gender">Gender</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="address 1" autocomplete="off" />
  <label for="address1">Address 1</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="address 2" autocomplete="off" />
  <label for="address2">Address 2</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="city" required autocomplete="off" />
  <label for="city">City</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="state" required autocomplete="off" />
  <label for="state">State</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="position" autocomplete="off" />
  <label for="Position">Position (coach, referee, etc)</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="program" required autocomplete="off" />
  <label for="Program">Program where individual works</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="IncidentDescription" required autocomplete="off" />
  <label for="IncidentDescription">Incident description</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="IncidentLocation" required autocomplete="off" />
  <label for="IncidentLocation">Incident location</label>
  <div class='divider'></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...