1

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

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

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

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">

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

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

2
  • Я вставил его просто так тут (опция Фрагмент кода), и счетчик тут есть. Мб у вас какие то стили прячут эту область
    – alexoander
    17 мар 2017 в 10:48
  • А как определить какие стили прячут?
    – code211218
    17 мар 2017 в 12:02

1 ответ 1

4

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

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"
3
  • На странице только твой код . Но отображается всёравно неправильно
    – code211218
    17 мар 2017 в 12:21
  • @codename0082016, возможно и впрямь какие-то стили по-умолчанию мешают. Попробуй открыть панель разработчика (в хроме f12) и посмотреть чтобы ничего не перекрывало стили инпута prntscr.com/el2trz
    – SVE
    17 мар 2017 в 12:33
  • 2
    @codename0082016, + проверь поддержку (возможно твой браузер не поддерживает) caniuse.com/#feat=input-number
    – SVE
    17 мар 2017 в 12:35

Ваш ответ

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

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