0

Имею в районе 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="[email protected]"
                     style="width: 55%; margin-right: 15%"></div>

1 ответ 1

4

используйте чистый 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="[email protected]"
    style="width: 55%; margin-right: 15%">
    <span class="span-input">e-mail</span>
</div>

1
  • Отличное решение спасибо=) поставлю галочку через 5 минутт пока нельзя таймер 20 фев 2018 в 10:58

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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