Адаптивное текстовое поле с иконками и счетчиком - PullRequest
Новая
       6

Адаптивное текстовое поле с иконками и счетчиком

0 голосов
/ 18 февраля 2020

Я пытаюсь создать поле ввода, в котором пользователь может увеличивать или уменьшать число. Поле ввода должно выглядеть следующим образом: отзывчивый

enter image description here

Тем не менее, это выглядит странно, когда я сделал следующий способ 

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />


<div class="input-with-icon">
   <div class="labelled-input">
     <div class="labelling">
        <div class="content">
          <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
          <div class="text-wrapper">
            <p class="adult">Adult</p>
            <p>16+year</p>
          </div>
       </div>
     </div>

     <div class="augment">
       <i class="fa fa-minus"></i>
     </div>
     <input type="text" class="input" disabled/>
     <div class="augment">
       <i class="fa fa-plus"></i>
     </div>

  </div>
</div>

Вот демо

https://jsbin.com/fiwabararo/edit?html, css, вывод

1 Ответ

2 голосов
/ 18 февраля 2020

Пожалуйста, проверьте этот фрагмент кода 

function counter(i){
  var el =document.getElementsByClassName('input');
(i == '+')
  ? el[0].value = parseInt(el[0].value) + 1
  :  el[0].value = parseInt(el[0].value) - 1;
}
.input-with-icon {
  position: relative;
    width: 100%;
    display: flex;

}

.labelled-input {
   position: relative;
    font-weight: 400;
    font-style: normal;
    display: inline-flex;
    border: solid 1px #99acbd;
    border-radius: 2px;
    background:#eceef2;
}

.labelling {
  display: inline-block;
    line-height: 1;
    vertical-align: baseline;
    background-image: none;
    color: rgba(0, 0, 0, 0.6);
    text-transform: none;
    font-weight: 700;
    border: 0 solid transparent;
    flex: 0 0 auto;
    margin: 0;
}

.labelling:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }

.content {
  display: flex;
    align-items: center;
    padding:0 12px
}

.augment {
  background: #ccd5de;
  text-align:center;
    cursor: pointer;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin: 10px;
  margin-top:18px
}
.augment:hover {
  background: #478dcf;
}
.augment i {
  line-height:2.6;
  color:#fff
}

.input {
  margin: 0;
    border: none;
    outline: 0;
    box-shadow: none;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}
.input:disabled {
      background: #fff;
    }
@media(max-width:480px){
  .input {
    width:56%;
  }
  .augment {
      width: 14%;
   }
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />


<div class="input-with-icon">
   <div class="labelled-input">
     <div class="labelling">
        <div class="content">
          <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
          <div class="text-wrapper">
            <p class="adult">Adult</p>
            <p>16+year</p>
          </div>
       </div>
     </div>
     
     <div class="augment" onclick="counter('-')">
       <i class="fa fa-minus"></i>
     </div>
     <input type="text" class="input" disabled value="0"  />
     <div class="augment" onclick="counter('+')">
       <i class="fa fa-plus"></i>
     </div>
     
  </div>
</div>
...