I have around 20 input by default of black color, it is necessary that when selecting input it changed the color of the text and the lower dash to red and after moving to another, the previous one became black again. Now 2 problems if going from the bottom up is not working correctly, or if switching between input using the "tab" does not work at all. Any solution css scss javaScript or jQuery will do. Dom is built just like a generic div in it span name, under it is 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>

    1 answer 1

    Use pure css and focus + pseudo-class. for this, the span-input must stand after input. therefore, it is possible to put the span-input after input, and through order to return it to its place (for this info you need to give 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>

    • Excellent decision thanks =) put a tick after 5 minutes until you can not timer - Evgeny Lyubimov