Как делать активный input красным

200

21 февраля 2018, 08:37

Имею в районе 20 input по дефолту черного цвета, надо что бы при выделении input у него изменялся цвет текста и нижней черточки на красный и после того как переходили к другому, предыдущий опять становился черным. Сейчас 2 проблемы если идти снизу вверх работает неправильно, или если переключаться между input при помощи "tab" то совсем не работает. Подойдет любое решение, css scss javaScript или jQuery. Dom построен именно так общий DIV в нем span название, под ним input

        $('.info').on('click', function () { 
      $(this.firstElementChild).css({ 
        'color': 'red' 
      }); 
      $(this.lastElementChild).css({ 
        'color': 'red', 
        'border-bottom': '1px solid red' 
      }); 
      $(this.previousElementSibling.firstElementChild).css({ 
        'color': 'black' 
      }); 
      $(this.previousElementSibling.lastElementChild).css({ 
        'color': 'black', 
        'border-bottom': '1px solid black' 
      }); 
      return false; 
    });

.info { 
  padding: 1.5% 0; 
} 
.input { 
  height: 2.133rem; 
  border-width: 0px; 
  border-bottom: 1px solid black; 
  //color: red; 
  border-radius: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
            <div class="info"> 
              <span class="span-input">Номер Телефона</span><br> 
              <input id="number-phone-input" class="input oj-component-initnode" type="text" value="" 
                     maxlength='30' placeholder="+7 (000) 000 00 00" 
                     style="width: 55%; margin-right: 15%"></div> 
            <div class="info"> 
              <span class="span-input">Факс</span><br> 
              <input id="fax-input" class="input oj-component-initnode" 
                     maxlength='30' placeholder="+7 (000) 000 00 00" 
                     style="width: 55%; margin-right: 15%"></div> 
            <div class="info"> 
              <span class="span-input">e-mail</span><br> 
              <input id="email-input" class="input oj-component-initnode" 
                     maxlength='30' placeholder="test@mail.ru" 
                     style="width: 55%; margin-right: 15%"></div>

Answer 1

используйте чистый css и псевдокласс focus + .нужный_элемент. для этого, span-input должен стоять после input. поэтому можно span-input поставить после input, а через order - вернуть на место (для этого info нужно дать flex)

.info { 
  padding: 1.5% 0; 
  display: flex; 
  flex-wrap: wrap ; 
} 
.input { 
  height: 2.133rem; 
  border-width: 0px; 
  border-bottom: 1px solid black; 
   
  border-radius: 0; 
} 
.span-input { 
  width: 100%; 
  order: -1 
} 
.input:focus { 
  border-bottom-color: red; 
} 
.input:focus + .span-input { 
  color: red; 
}

   <div class="info"> 
              <input id="number-phone-input" class="input oj-component-initnode" type="text" value="" 
                     maxlength='30' placeholder="+7 (000) 000 00 00" 
                     style="width: 55%; margin-right: 15%"> 
     <span class="span-input">Номер Телефона</span> 
</div> 
            <div class="info"> 
               
              <input id="fax-input" class="input oj-component-initnode" 
                     maxlength='30' placeholder="+7 (000) 000 00 00" 
                     style="width: 55%; margin-right: 15%"> 
              <span class="span-input">Факс</span> 
</div> 
            <div class="info"> 
              
              <input id="email-input" class="input oj-component-initnode" 
                     maxlength='30' placeholder="test@mail.ru" 
                     style="width: 55%; margin-right: 15%"> 
               <span class="span-input">e-mail</span> 
</div>