Question

如何在聚焦时使文本框边框的颜色淡入另一种颜色？例如，如果边框颜色为#ddd，那么用户专注于文本框，它会淡入＃0266C8，当它们不聚焦时，它会再次淡入#ddd。这是我的代码：

<!doctype html>
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function passwordCheck(y){
    var x = y.value;
    if(x.length>5) {
        document.getElementById("error").innerHTML="Limit is 5 characters";
    } else {
        if(x.length<6) {
            document.getElementById("error").innerHTML="";
        }
    }
}
</script>
<style type="text/css">
body {
    margin:auto;
    font-family:arial, sans-serif;
    padding-top:100px;
}
.container {
    width:920px;
    margin:auto;
    text-align:center;
}
.main_text {
    font-family:"Bebas Neue";
    font-size:76px;
    color:green;
    margin-bottom:10px;
}
.textbox1 {
    border: 4px solid #ddd;
    width: 888px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 2em;
    outline: none;
    font-family: sans-serif;
    border-radius:100px;
    height:48px;
}
.textbox1:focus {
    border: 4px solid #0266C8;
}
#error {
    font-size:24px;
    color:red;
    font-family:"Bebas Neue";
}
</style>
</head>
<body>
<div class="container">
    <span class="main_text">Password Strength Checker</span><br>
    <input name="textbox1" onkeyup="passwordCheck(this);" onKeyPress="passwordCheck(this);" onChange="passwordCheck(this);" onKeyDown="passwordCheck(this);" type="password" class="textbox1" placeholder="Enter Password" style="margin-top:10px;" autofocus><br><br>
    <div id="error"></div>
</div>
</body>
</html>

任何帮助将不胜感激。谢谢，奥马尔。

Answer 1

使用CSS3过渡。

.textbox1 {
    border: 4px solid #ddd;
    width: 888px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 2em;
    outline: none;
    font-family: sans-serif;
    border-radius:100px;
    height:48px;

     transition: background .5s ease-out; // global
    -moz-transition: all .5s ease-out; // for mozilla
    -o-transition: all .5s ease-out; // for opera
    -webkit-transition: all .5s ease-out; //for webkit, chrome or safari
}
.textbox1:focus {
    border: 4px solid #0266C8;
     transition: background .5s ease-in; // global
    -moz-transition: all .5s ease-in; // for mozilla
    -o-transition: all .5s ease-in; // for opera
    -webkit-transition: all .5s ease-in; //for webkit, chrome or safari
}

您可以在.5s ease-in

上设置淡入淡出延迟

Answer 2

您可以尝试在此使用CSS transition：

transition: border-color 1s linear;
-moz-transition: border-color 1s linear;   
-o-transition: border-color 1s linear; 
-webkit-transition: border-color 1s linear;

Fiddle Demo

Answer 3

你可以使用：

.container input{
 -moz-transition: all 1s linear;
 -webkit-transition: all 1s linear;
 -o-transition: all 1s linear;
 transition: all 1s linear;
}

.container input:focus {
  border: 1px solid #4F94CD;
}

如何使用JavaScript或jQuery使文本框边框颜色淡入焦点

3 个答案: