Блог

Главная - Вопросы по программированию - Переместить поле ввода поверх диапазона

Переместить поле ввода поверх диапазона

#html #css

#HTML #css

Вопрос:

У меня есть span в качестве метки для моего inputfield. При выборе надпись располагается над полем ввода.

Моя проблема в том, что когда вы пытаетесь щелкнуть по полю ввода, метка находится «перед» полем ввода и блокирует его выбор.

Я пытался исправить это с помощью z-индексов, но, похоже, это не работает.

Кто-нибудь может мне помочь с размещением поля ввода перед диапазоном?

 #input {
  color: #686868;
  vertical-align: middle;
  padding: 0px !important;
  font-size: 16px;
  border-width: 0;
  overflow: visible;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #d5dce3;
  background-color: transparent !important;
}

#input:focus {
  border-color: #1F76BC;
}

#label {
  color: rgba(0,0,0,.99);
  transition-timing-function: cubic-bezier(.075,.82,.165,1);
  transition-duration: .5s;
  position: absolute;
  width: 100%;
  text-align: left;
  font-size: 16px;
  bottom: 6px;
  color: #8792a1;
}

.container:focus-within #label {
    transform: translate3d(0,-26px,0);
    color: rgba(0,0,0,.99);
}

.container {
  position: relative;
  margin-top: 32px;
}  
 <div class="container">
   <span id="label">Provincie</span>
   <input type="text" id="input" value="" size="40"> 
</div>

Ответ №1:

Используйте label вместо span , и ваш input текст будет хорошо кликабелен, независимо от расположения заполнителя

 input = document.querySelector("#input");
label = document.querySelector(".container > label");

input.addEventListener("change", function () {
    if (this.value !== "") {
        label.style.transform = "translate3d(0, -26px, 0)";
    } else {
        label.style.transform = "";
    }
});  
 #input {
    color: #686868;
    vertical-align: middle;
    padding: 0px !important;
    font-size: 16px;
    border-width: 0;
    overflow: visible;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid #d5dce3;
    background-color: transparent !important;
}

#input:focus {
    border-color: #1f76bc;
}

label {
    color: rgba(0, 0, 0, 0.99);
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-duration: 0.5s;
    position: absolute;
    width: 100%;
    text-align: left;
    font-size: 16px;
    bottom: 6px;
    color: #8792a1;
}

.container:focus-within label {
    transform: translate3d(0, -26px, 0);
    color: rgba(0, 0, 0, 0.99);
}

.container {
    position: relative;
    margin-top: 32px;
}  
 <div class="container">
    <label for="input">Provincie</label>
    <input type="text" id="input" value="" size="40" />
</div>

Комментарии:

1. Мне вроде как понравилось это решение, но есть одна небольшая проблема, когда вы вводите текст во входных данных, метка будет располагаться за введенным значением, я не уверен, что OP нуждается в этом и не выглядит хорошо с точки зрения пользовательского интерфейса, может быть, вам нужно поместить метку за текстом?

2. @Manjuboyz, спасибо, что понравилось мое решение 🙂 Я только что проверил свое решение, и да, вы правы, и я не учел этот момент. Заполнитель следует оставить позади текста. Нам придется это исправить.

3. @Manjuboyz метка будет поверх поля ввода, когда будет введено значение (которое уже работает), но я опустил эту часть для простоты 🙂

4. @DaanSeuntjens круто, тогда у вас есть ответ 🙂

5. @Manjuboyz, я написал небольшой скрипт для настройки заполнителя. Надеюсь, это то, что вам нужно.

Ответ №2:

пожалуйста, добавьте этот стиль.

 #input{
  position:relative;
  z-index:999;
}
  

 #input {
  color: #686868;
  vertical-align: middle;
  padding: 0px !important;
  font-size: 16px;
  border-width: 0;
  overflow: visible;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #d5dce3;
  background-color: transparent !important;
  position:relative;
  z-index:999;
}

#input:focus {
  border-color: #1F76BC;
}

#label {
  color: rgba(0,0,0,.99);
  transition-timing-function: cubic-bezier(.075,.82,.165,1);
  transition-duration: .5s;
  position: absolute;
  width: 100%;
  text-align: left;
  font-size: 16px;
  bottom: 6px;
  color: #8792a1;
}

.container:focus-within #label {
    transform: translate3d(0,-26px,0);
    color: rgba(0,0,0,.99);
}

.container {
  position: relative;
  margin-top: 32px;
}  
 <div class="container">
   <span id="label">Provincie</span>
   <input type="text" id="input" value="" size="40"> 
</div>

Комментарии:

1. Эта надпись довольно просто и плавно перемещается наверх при нажатии на поле ввода @Daan Seuntjens проверьте, чтобы это добавляло только два стиля position:relative и некоторое z-index:999; большее значение z-индекса

Ответ №3:

Что-то вроде этого??

 #input {
  color: #686868;
  vertical-align: middle;
  padding: 0px !important;
  font-size: 16px;
  border-width: 0;
  overflow: visible;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #d5dce3;
  background-color: transparent !important;
}

#input:focus {
  border-color: #1F76BC;
}

#label {
  color: rgba(0, 0, 0, .99);
  transition-timing-function: cubic-bezier(.075, .82, .165, 1);
  transition-duration: .5s;
  position: absolute;
  width: 100%;
  text-align: left;
  font-size: 16px;
  bottom: 6px;
  color: #8792a1;
}

.container:focus-within #label {
  transform: translate3d(0, -26px, 0);
  color: rgba(0, 0, 0, .99);
}

.container {
  position: relative;
  margin-top: 32px;
}  
 <div class="container">
  <input type="text" id="input" value="" size="40" placeholder="Provincie">
</div>

Комментарии:

1. Не перемещает метку наверх при нажатии на поле ввода..

2. @RayeesAC да, этого не произойдет, и я согласен, что это не то, что нужно OP, но я предоставляю лучший вариант, чем создание текста, перемешанного на ярлыке (что вы и делаете сейчас). и, конечно, я удалю свой ответ, если OP это не нужно 🙂