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>

这是CSS

#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

我继续为您制作了一个代码，以向您展示以下博客文章的价值：

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 :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

我创建了一支笔，在父p上设置了一个突出显示的类，并使用此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，但我们可以用＆＃39; +＆＃39;来获得下一个兄弟元素。选择。所以我所做的就是在输入后放置包含图标的标签，当使用css :focus伪元素以及＆＃39; +＆＃39;进行聚焦时，它会改变它的颜色。 css的选择器，用于获取聚焦输入旁边标签中的图标。

为了在输入前移动标签后正确设置位置。我将输入和标签css类从float:left更改为float:right。这使得它们在输入之前标记的位置与宽度百分比i从77％变为75％，以保持响应性在较小的屏幕上正确。以下是示例代码。

示例代码：http://codepen.io/Nasir_T/pen/VmrgWw

希望这可以帮助您和任何不希望使用JS代码解决方案的未来编码人员。

我需要在文本输入焦点上更改图标的颜色

4 个答案: