0

Есть ли способ сделать неисчезаемую подсказку в input правильнее/профессиональнее для адаптивной верстки?

jsfiddle

body {
  margin: 0;
  padding: 0;
}

.myinput {
  float: left;
  width: 300px;
  padding-left: 25px;
}

.ot {
  float: left;
  position: relative;
  margin-left: -325px;
  color: #ccc;
  font-style: italic;
}

.input-group {
  width: 300px;
  margin: 0 auto;
}
<div class="input-group">
  <input class="myinput" type="text" />
  <div class="ot">от</div>
</div>

1
  • Единственное я бы изменил div на span... А так все верно решено
    – Air
    25 дек 2017 в 8:06

1 ответ 1

1

Вместо div использовать label, который устанавливает связь между определенной меткой и элементом формы.

Метка - в данной случае это текст в label

Элемент формы - input

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.input-group {
  max-width: 300px;
  margin: 10px auto;
  width: 100%;
  position: relative;
}

.myinput {
  width: 100%;
  padding: 5px 25px 5px 40px;
  height: 40px;
}

.mylabel {
  position: absolute;
  top: 0;
  left: 15px;
  color: #ccc;
  font-style: italic;
  height: 40px;
  line-height: 40px;
}
<div class="input-group">
  <input class="myinput" type="text" id="text" />
  <label class="mylabel" for="text">от</label>
</div>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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