2

Подскажите, как сделать placeholder над рамкой input? z-index не работает. Оставил его в коде на всякий случай. Есть вариант использовать span или label с абсолютным позиционированием но label уже занят, а лишние элементы не хотелось бы вводить без необходимости. Хочется сделать так:

введите сюда описание изображения

form {
  display: flex;
  flex-direction: column;
}

input {
  width: 200px;
  height: 30px;
}

input::placeholder {
  transition-duration: .3s;
  background-color: white;
  padding: 3px;
  z-index: 100;
}

input:focus::placeholder {
  font-size: 14px;
  transform: translateY(-18px);
  z-index: 100;
}
<form>
  <label for="female">Фамилия:</label><br>
  <input id="female" placeholder="Фамилия *" required>
  <label for="name">Имя:</label><br>
  <input id="name" placeholder="Имя *" required>
  <label for="surname">Отчество:</label><br>
  <input id="surname" placeholder="Отчество">
</form>

https://codepen.io/Merlin1618/pen/jKVBLL

Есть вариант подключить jQuery библиотеку (jQuery-Floating-Placeholder), но хотелось бы обойтись своими силами.

1
  • Оберните ваши input каким-либо div и добавляйте элементы с position: absolute. Псевдоэлементы для input работают только в Chrome. И вам к тому же надо во все input добавить крестики, поэтому без этого не обойтись. 8 июн 2018 в 8:26

2 ответа 2

0

.form {
  position: relative;
  width: 300px;
  height: 30px;
  margin: 0 auto;
}

.form input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 2px solid rgb(60, 239, 90);
  border-radius: 10px;
  outline: none;
}

.form label {
  position: absolute;
  top: 8px;
  left: 15px;
  color: #ccc;
  padding: 0 5px;
  transition: top .5s;
  }

.form input:focus ~ label {
  top: -10px;
  background-color: #fff;
}
<form class="form">
  <input id="female" required>
  <label for="female">Фамилия:</label><br>
</form>

Такое нужно было?

-2

Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative. Источник

1
  • 1
    ::placeholder не является элементом страницы, чтобы им так манипулировать
    – DaemonHK
    8 июн 2018 в 7:31

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.