мне нужно изменить цвет значка на ввод текста фокус

Question

Я хотел бы включить функцию формы фокусировки, где она изменяет цвет каждого значка, когда вы сосредоточены на этой конкретной области

<div id="rightside"> 
      <div th:replace="fragments/loginform"> 
      <form method="post" id="login" th:object="${credential}"> 
    <p id="errors" class="warning" role="alert"> 
      <span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/> 
     </p>  
    <p id="block"> 

     <label for="username" class="has-feedback"><i class="fa fa-user" aria-hidden="true"></i></label> 

     <span th:if="${openIdLocalId}"> 
       <strong> 
        <span th:utext="${openIdLocalId}"/> 
       </strong> 
       <input type="hidden" 
         id="username" 
         name="username" 
         th:value="${openIdLocalId}"/> 
      </span> 

      <span th:unless="${openIdLocalId}"> 
       <input class="required textinput has-feedback" 
         placeholder="UH Username" 
         id="username" 
         size="14" 
         tabindex="1" 
         type="text" 
         th:field="*{username}" 
         th:accesskey="#{screen.welcome.label.netid.accesskey}" 
         autocomplete="off" 
         autocapitalize="off" 
         autocorrect="off" 
         required="required" 
         autofocus="autofocus" 
       /> 
      </span> 
     </p> 

     <p id="block"> 
     <label for="password" class="fontawesome-lock"><i class="fa fa-lock" aria-hidden="true"></i></label> 

       <input class="required textinput"      
         placeholder="Password" 
         type="password" 
         id="password" 
         name="password" 
         size="14" 
         tabindex="2" 
         th:accesskey="#{screen.welcome.label.password.accesskey}" 
         th:field="*{password}" 
         autocomplete="off" 
         required="required"     
       />          
     </p> 

Вот СМЧ

#rightside { 
    margin-top: 15px; 
    float: left; 
    width: 70%; 
} 
#rightside h3 { 
    font-size: 110%; 
} 
#rightside a { 
    display: block; 
} 
#rightside input.textinput { 
    width: 60%; 
    float: left; 
    padding-left: 5px; 
    height: 35px; 
    border-radius: 7px; 
} 
#rightside input.textinput:focus { 
    outline-width: 0; 
} 
#rightside form label { 
    background-color: #e1e1e1; 
    border-radius: 8px 0px 0px 8px; 
    border: solid 1px #CCC; 
    border-right: 1px solid #CCC; 
    color: #000; 
    display: block; 
    float: left; 
    line-height: 50px; 
    text-align: center; 
    font-size: 20px; 
    width: 15%; 
    height: 50px; 
} 
#rightside form input[type="text"] { 
    float: left; 
    background-color: #fff; 
    border-radius: 0px 8px 8px 0px; 
    color: #000; 
    padding: 0 3%; 
    width: 77%; 
    height: 50px; 
} 
#rightside form input[type="password"] { 
    float: left; 
    background-color: #fff; 
    border-radius: 0px 8px 8px 0px; 
    color: #000; 
    padding: 0 3%; 
    width: 77%; 
    height: 50px; 
} 
#rightside form input[type="submit"] { 
    float: left; 
    background: #e1e1e1; 
    width: 99%; 
    height: 50px; 
    border-radius: 5px; 
    border: solid 1px #978257; 
    margin-bottom: 1.5em; 
    color: black; 
    cursor: pointer; 
    transition: background 0.3s ease-in-out; 
    font-weight: 600; 
} 
#rightside form input[type="submit"]:hover { 
    background: #b6985a; 
    color: #fff; 
} 

Когда пользователь фокусируется на любом текстовом поле, шрифт-устрашающего значок, относящийся к этому полю ввода должен изменить цвет. Любая помощь будет замечательной! Благодаря! CSS только бы желательно, но JS будет работать слишком

Answer 1

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

https://css-tricks.com/snippets/jquery/highlight-related-label-when-input-in-focus/

Вот что он предлагает:

$("form :input").focus(function() { 
    $("label[for='" + this.id + "']").addClass("labelfocus"); 
}).blur(function() { 
    $("label").removeClass("labelfocus"); 
}); 

Выше используется jQuery, и он хорошо работает как концептуальный пример.

http://codepen.io/MassDebates/pen/ZBaVJL

Если вы хотите сделать что-то, которое использует CSS «s :focus, то я хотел бы предложить вам изменить разметку, чтобы что-то вроде брата (~), примыкающей/следующий собрата (+) или даже descendant selector если вы оберните свой input в label.

Ключ здесь - связать свой значок label (<i>) с вашим элементом input.

Answer 2

Вы можете играть с :focus и :blur псевдоклассов

$(document).ready(function(){ 
    $(".username").focus(function(){ 
     $(".fa-user").css("color","red"); 
     console.log("in"); 
    }).blur(function() { 
     $(".fa-user").css("color","yellow"); 
     console.log('out'); 
    }); 

    $(".password").focus(function(){ 
     $(".fa-lock").css("color","red"); 
     console.log("in"); 
    }).blur(function() { 
     $(".fa-lock").css("color","yellow"); 
     console.log('out'); 
    }); 


}); 

https://jsfiddle.net/czs3sy0a/2/

Answer 3

Я создал ручку, которая устанавливает выделенный класс на родительском р и цвета иконку с помощью этого CSS:

p.highlighted .fa {color: red;} 

И это JS:

$(function() { 
    $('input').focusin(function() { 
     $(this).parent().parent().addClass('highlighted'); 
    }); 
    $('input').focusout(function() { 
     $(this).parent().parent().removeClass('highlighted'); 
    }); 
}); 

http://codepen.io/anon/pen/pNdqYP

Answer 4

Вот чистый CSS решение, которое вы можете использовать. Как мы знаем, у нас нет способа выбрать родительский элемент вместе с css, но мы можем получить следующий элемент sibling с помощью селектора «+». Итак, что я сделал, помещен ярлык, содержащий значок сразу после ввода, который изменит его цвет при фокусировке с использованием псевдоэлемента css :focus вместе с селектором «+» css, чтобы получить значок на этикетке рядом с фокусом ввода ,

Для правильной установки позиций после перемещения надписей перед входами. Я изменил ввод и метку класса css от float:left до float:right. Это выровняло их, где метка была введена до ввода, а процент ширины я изменил с 77% до 75%, чтобы сохранить правильность реакции на меньших экранах. Ниже приведен пример кода.

Пример код: http://codepen.io/Nasir_T/pen/VmrgWw

Надеется, что это поможет вам, и любым будущим кодерам, которые не хотят работать с раствором кода JS.