Содержание

html — Проверка input на пустое значение средствами css

Добрый день. Подскажите как реализовать следующую логику на css. http://prntscr.com/h61u0q При наведении фокусе на input текст(placeholder) поднимается вверх и уменьшает размер. При потере фокуса, текст возвращается в исходное положение, а если пользователь вводит текст в input placeholder остается на месте. Вопрос в том как оставить текст placeholder на верху при заполненном input? Вот код: https://codepen.io/iliasidash/pen/WXwOMM

.feedback-form {
  &__title {
    font-size: 25px;
    margin-bottom: 35px;
  }
  &__label {
    display: block;
    position: relative;
    span {
      display: block;
      position: absolute;
      width: 100%;
      color: #777777;
      font-size: 15px;
      left: 0;
      bottom: 7px;
      top: 20px;
      transition: all .3s .1s;
    }
  }
  &__input {
    display: block;
    background: none;
    border: none;
    border-bottom: 1px solid #b8b6b4;
    padding: 20px 0 7px;
    width: 100%;
    margin-bottom: 20px;
    top: 20px;
    &:focus {
      color: #222222;
      border-bottom: 1px solid #61574c;
    }
    &:focus+span {
      top: 0;
      font-size: 12px;
      transition: all .
3s; } &:required+span { top: 0; font-size: 12px; } } &__btn { color: #c58d4c; border: none; cursor: pointer; margin-top: 20px; } }
<div>
  <div>Связаться с нами</div>
  <form action="#" method="post">
    <label>
      <input type="text" name="name">
      <span>Укажите ваше имя *</span>
    </label>

    <label>
      <input type="email" name="email">
      <span>Почту для обратной связи*</span>
    </label>

    <label>
      <input type="tel" name="phone">
      <span>Номер телефона *</span>
    </label>
    <label>
      <input type="tel" name="phone">
      <span>Ваше сообщение *</span>
    </label>

    <button type="submit">Отправить</button>
  </form>
  • html
  • css

4

Кроссбраузерно — никак. Либо использовать :placeholder-shown (не работает в IE и Edge) либо псевдо-класс :valid (не совсем корректно работает с input type=»email». Если ввести адрес почты как положено ([email protected]), эффект будет достигнут. Но при случайном наборе букв плейсхолдер вернется на своем место.

body {
	padding: 20px;
}

label {
	position: relative;
}

#ph {
	padding: 5px;
}

.ph {
	position: absolute;
	transition: .2s;
	left: 3px;
	top: 2px;
	font-size: 14px;
}

#ph:focus ~ .ph,
#ph:valid ~ .ph {
	top: -25px;
	font-size: 12px;
}
<label for="ph">
		<input type="text" required>
		<span>Placeholder</span>
	</label>

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

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

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

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

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

Почта

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

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

Почта

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

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

Тег input | Справочник HTML CSS

Chrome

Все

Edge

Все

FireFox

Все

iOS Safari

Все

Opera

Все

Safari

Все

Стили по умолчанию

Стили которые браузер применяет к элементу по-умолчанию.

В списке ниже приведены стили, которые влияют на внешний вид элемента и изменяются при помощи CSS.

input {
    color: initial;
    display: inline-block;
    text-align: start;
    background-color: white;
    cursor: text;
    font: 400 13.3333px Arial;
    padding: 1px 0px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
}

Атрибуты

type=""

Задает тип поля.

text — текстовое поле

password — поле для ввода пароля

email — поле для ввода email адреса

tel — поле для ввода номера телефона

file — создает кнопку загрузки файла

hidden — скрытое поле

checkbox — флаг (чекбокс)

radio — переключатель

number — поле для ввода цифр

url — поле для ввода URL адреса

range — поле для выбора значений от и до

date — поле для выбора даты

time — поле для выбора времени

datetime — поле для выбора даты и времени

search — поле для поиска

submit — кнопка для отправки формы

button — обычная кнопка

reset — кнопка для сброса значений формы

name=""

Уникальное имя поля. Используется для получения значений на сервере.

value=""

Значение внутри поля

placeholder

Текст внутри поля, который определяет что это за поле. Текст виден только если поле пустое.

required

Указывает что поле обязательно для заполнения. Браузерная проверка.

disabled

Поле недоступно для заполнения.

autofocus

Устанавливает фокус в данное поле по умолчанию при загрузке страницы.

readonly

Поле только для чтения. Ввод запрещен.

checked

Используется для полей с типом checkbox и radio. Если указан данный атрибут, то поле будет отмечено.

tabindex=""

Указывает последовательность перехода по полям формы при нажатии на кнопку tab. Указывается целое положительное либо отрицательное число.

min=""

Минимальное значение поля. Используется для полей с типом date, range, number

max=""

Максимальное значение поля. Используется для полей с типом date, range, number

maxlength=""

Максимально допустимое количество символов вводимых в поле.

Ввод W3.CSS

❮ Предыдущий Далее ❯


Форма ввода

Имя

Эл. адрес

Предмет


Молоко
Сахар
Лимон (Отключено)

Мужчина
Женский
Не знаю (отключено)


Верхние этикетки

Форма ввода

Имя

Фамилия

Пример



Попробуйте сами »

Нижние этикетки

Форма ввода

Имя

Фамилия

Пример



Попробуйте сами »



Карты ввода

Заголовок

Имя

Фамилия


Пример


 

Заголовок




Попробуйте сами »


Цветные метки

Используйте любой из классов w3-text-color , чтобы раскрасить метки:

Имя

Фамилия

регистр

Пример

<форма>

<метка class="w3-text-blue">Имя

 
<метка class="w3-text-blue">Фамилия


 

Попробуйте сами »


Ввод с рамками

Добавьте класс w3-border для создания полей ввода с рамками:

Имя

Фамилия


Пример

<ввод тип="текст">

Попробуйте сами »


Закругленные границы

Используйте любой из классов

w3-round для создания закругленных границ:

Имя

Фамилия


Пример

<ввод тип = "текст">

<ввод type="text">

Попробуйте сами »


Ввод без полей

Класс w3-input по умолчанию имеет нижнюю границу. Если вы хотите ввод без полей, добавьте w3-граница-0 класс:

Имя

Фамилия


Пример


 
 

 
 


Попробуйте сами »


Цвета

Не стесняйтесь использовать ваши любимые стили и цвета:

Форма ввода

Имя

Фамилия

регистр

Пример


 

Форма ввода



 

 

 

Попробуйте сами »


Hoverable inputs

Классы w3-hover- color

добавляют цвет фона к полю ввода при наведении курсора:

Форма ввода

Имя:

Фамилия:

Тема:

Пример




Попробуйте сами »


Анимированные вводы

Класс w3-animate-input преобразует ширину поля ввода в 100%, когда оно получает фокус:

Пример

Попробуйте сами »


Флажки

Молоко

Сахар

Лимон (Отключено)

Пример




Попробуйте сами »


Пример




Попробуйте сами »


Выберите параметры

Выберите вариант Вариант 1 Вариант 2 Вариант 3

Пример

Попробуйте сами »


Меню выбора с рамками

Выберите свой вариантВариант 1Вариант 2Вариант 3

Пример