我已经为我所做的附加了一个活塞链接
http://plnkr.co/edit/JlARpFiVEFryAhgxgWJm?p =
预览 input[attribute=flag]:focus {
color: red;
}
input[attribute=flag]{
color: green;
} <form name="Form" class="form-horizontal " style="padding-left:9%;">
<div class="form-group">
<div class="col-sm-11 ">
<label for="inputEmail" class="control-label" >Email</label><br>
<input type="email" attribute=flag class="form-control inputBorderStyle box" id="usernameLogin" name="username" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-11 "><br>
<label for="inputPassword" class="control-label">Password</label><br>
<input type="password" attribute=flag class="form-control inputBorderStyle box" id="usernamePassword" name="password" required="">
</div>
</div>
<div class="form-group last">
<div class="col-sm-11"><br>
<button type="submit" id="loginButton" class="btn btn-myprimary">LOG IN</button>
</div>
</div>
</form>输入i的Onfocus想要改变标签和输入的颜色。现在我能够改变输入的颜色，但如何改变标签的颜色聚焦和改变它回到其他颜色的模糊。如果有人有想法，请建议。提前感谢
尝试使用focusin和focusout效果。
Jsfiddle
$(document).ready(function() {
$("input").on("focusin", function() {
$(this).siblings("label").css("color","red");
$(this).css("color","red");
});
$("input").on("focusout", function() {
$(this).siblings("label").css("color","green");
$(this).css("color","green");
})
})
试试下面的代码:
$(function(){
$('input[type=email], input[type=password]').focus(function(){
$(this).closest('div').find('label').css({color:'red'})
});
$('input[type=email], input[type=password]').blur(function(){
$(this).closest('div').find('label').css({color:'#000'})
});
});/* Styles go here */
.inputBorderStyle{
border:0;
box-shadow:none !important;
border-bottom:1px solid black;
border-radius:0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
input[attribute=flag]:focus {
color: red;
}
input[attribute=flag]{
color: green;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="script.js"></script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form name="Form" class="form-horizontal " style="padding-left:9%;">
<div class="form-group">
<div class="col-sm-11 ">
<label for="inputEmail" class="control-label" >Email</label><br>
<input type="email" attribute=flag class="form-control inputBorderStyle box" id="usernameLogin" name="username" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-11 "><br>
<label for="inputPassword" class="control-label">Password</label><br>
<input type="password" attribute=flag class="form-control inputBorderStyle box" id="usernamePassword" name="password" required="">
</div>
</div>
<div class="form-group last">
<div class="col-sm-11"><br>
<button type="submit" id="loginButton" class="btn btn-myprimary">LOG IN</button>
</div>
</div>
</form>
</body>
</html>
</body>
</html>focus和blur事件允许您在HTML元素接收焦点和焦点断开时绑定相应的事件。
你可以在输入上添加onfocus和onblur事件(不使用jQuery)
var userField = document.getElementById("usernameLogin");
userField.addEventListener("focus",function(){
this.parent.getElementsByTagName("label")[0].style.color = 'red';
});
userField.addEventListener("blur",function(){
this.parent.getElementsByTagName("label")[0].style.color = 'green';
});
Use jquery, to attach event focus to the input and the label after that add class to input and to the the label and detach the class on blur
$("input").on("focus",function(){
$(this).addClass("focusclass")
$(this).closest(".col-md-11").first().addClass("Labelfocusclass")
}
$("input").on("blur",function(){
$(this).removeClass("focusclass")
$(this).closest(".col-md-11").first().removeClass("Labelfocusclass")
}
JavaScript解决方案:
像这样使用onfocus和onblur事件:
function changeColor(obj) {
document.getElementById(obj).style.color = "red";
}
function removeColor(obj) {
document.getElementById(obj).style.color = "black";
}/* Styles go here */
.inputBorderStyle {
border: 0;
box-shadow: none !important;
border-bottom: 1px solid black;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
input[attribute=flag]:focus {
color: red;
}
input[attribute=flag] {
color: green;
}<form name="Form" class="form-horizontal " style="padding-left:9%;">
<div class="form-group">
<div class="col-sm-11 "><br>
<label for="inputEmail" class="control-label" id="email">Email</label><br>
<input type="email" attribute=flag class="form-control inputBorderStyle box" id="usernameLogin" name="username" required="" onfocus="changeColor('email')" onblur="removeColor('email')">
</div>
</div>
<div class="form-group">
<div class="col-sm-11 "><br>
<label for="inputPassword" class="control-label" id="password">Password</label><br>
<input type="password" attribute=flag class="form-control inputBorderStyle box" id="usernamePassword" name="password" required="" onfocus="changeColor('password')" onblur="removeColor('password')">
</div>
</div>
<div class="form-group last">
<div class="col-sm-11"><br>
<button type="submit" id="loginButton" class="btn btn-myprimary">LOG IN</button>
</div>
</div>
</form>检查我的提琴，让我知道我是用jquery完成的
https://jsfiddle.net/estvwpvz/5/var divs = document.getElementsByClassName('inputBorderStyle');
for(var i = 0; i < divs.length; i++)
{
document.getElementsByClassName('inputBorderStyle')[i].addEventListener("focusin", myFunction);
document.getElementsByClassName('inputBorderStyle')[i].addEventListener("focusout", myFunctionout);
}
function myFunction() {
this.style.color= "red";
this.parentElement.getElementsByTagName("label")[0].style.color = 'red';
}
function myFunctionout() {
this.style.color= "white";
this.parentElement.getElementsByTagName("label")[0].style.color = 'black';
}