Как сделать такую форму?

267

19 марта 2017, 05:12

Взято отсюда:

https://djinni.co/wish/

После вставки этого:

<input name="salary_min" id="salary_min" step="100" autocomplete="off" class="form-control input salary" value="1500" required="" type="number">

Получилось так. Но тут нету счётчика. как его сделать? Каким образом (скриптом) его обрабатывать?

Answer 1

При наведении и фокусе видны стрелочки:

label { 
  display: block; 
  float: left; 
  width: 20px; 
  height: 20px; 
  background: #eee; 
  border: 1px solid #ccc; 
  border-right: none; 
  border-radius: 4px 0px 0px 4px; 
  text-align: center; 
  padding: 5px 2px; 
} 
 
input { 
  display: block; 
  float: left; 
  width: 50px; 
  height: 24px; 
  padding: 3px 2px; 
  border: 1px solid #ccc; 
  border-radius: 0px 4px 4px 0px; 
}

  <label for="salary_min">$</label> 
  <input name="salary_min" id="salary_min" step="100" autocomplete="off" class="form-control input salary" value="1500" required="" type="number">

Причины, почему не отображается:

Возможно и впрямь какие-то стили по-умолчанию мешают. Попробуйте открыть панель разработчика (в хроме f12) и посмотреть чтобы ничего не перекрывало стили инпута скрин
Поддержка (возможно Ваш браузер не поддерживает input[type="number"]) caniuse.com/#feat=input-number
возможно стоит обязательно задать min="N" и max="N"