如何在字段为空时更改边框颜色

我正在尝试创建登录表单。这里是例子..如何在字段为空时更改边框颜色

.log { 
 
    margin-top: 40px; 
 
    margin-left: 30px; 
 
    margin-right: 30px; 
 
    position: relative; 
 
} 
 

 
.log input[type="text"] { 
 
    font-size:13px; 
 
    padding:10px 10px 10px 5px; 
 
    display:block; 
 
    width:100%; 
 
    border:none; 
 
    border-bottom:1px solid #757575; 
 
    background-color: #fff; 
 
} 
 

 
.log input[type="password"] { 
 
    font-size:13px; 
 
    padding: 5px 10px 5px 5px; 
 
    display:block; 
 
    width:100%; 
 
    border:none; 
 
    border-bottom:1px solid #757575; 
 
    background-color: #fff; 
 
} 
 

 
.inputlog:focus { outline:none;} 
 

 
.log label { 
 
    color:#999; 
 
    font-size:14px; 
 
    font-weight:normal; 
 
    position:absolute; 
 
    pointer-events:none; 
 
    left: 5px; 
 
    top: 5px; 
 
    transition:0.2s ease all; 
 
    -moz-transition:0.2s ease all; 
 
    -webkit-transition:0.2s ease all; 
 
} 
 

 
input.inputlog:focus ~ label, input.used ~ label { 
 
top: -20px; 
 
    color: #4a89dc; 
 
    } 
 

 
.bar { 
 
    position:relative; 
 
    display:block; 
 
    width:100%; 
 
} 
 

 
.bar:before, .bar:after { 
 
    content:''; 
 
    height:2px; 
 
    width: 0; 
 
    bottom:1px; 
 
    position:absolute; 
 
    background: #1ba4df; 
 
    transition:0.2s ease all; 
 
    -moz-transition:0.2s ease all; 
 
    -webkit-transition:0.2s ease all; 
 
} 
 

 
.bar:before { 
 
    left:50%; 
 
} 
 
.bar:after { 
 
    right:50%; 
 
} 
 

 
.inputlog:focus ~ .bar:before, .inputlog:focus ~ .bar:after { 
 
    width:50%; 
 
}

<div class="form-desc"> 
 
    <div class="lock-icon"> 
 
\t <img src="assets/img/icon/padlock.png"> 
 
\t \t </div> 
 
\t \t <div class="login-msg"> 
 
\t \t \t <h4>Great to have you back!</h4> 
 
\t \t </div> 
 
\t \t <form > 
 
\t \t \t <div class="log">  
 
\t \t \t \t <input class="inputlog" type="text"> 
 
\t \t \t \t <span class="highlight"></span> 
 
\t \t \t \t <span class="bar"></span> 
 
\t \t \t \t <label>Email Address</label> 
 
\t \t  </div> 
 

 
\t \t \t <div class="log">  
 
\t \t \t \t <input class="inputlog" type="password"> 
 
\t \t   <span class="highlight"></span> 
 
\t \t   <span class="bar"></span> 
 
\t \t \t  <label>Password</label> 
 
\t \t \t </div> 
 

 
\t \t  <div class="forgot-pswd"> 
 
\t \t \t <a href="#">Forgot Password?</a> 
 
\t \t \t \t </div> 
 

 
\t \t \t <div class="login-algn"> 
 
\t \t \t \t <div class="login-btn"> 
 
\t \t \t \t \t <h4>LOGIN</h4> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
<div class="new-login"> 
 
<p>New here?<a href="register.html"> Click here to Register</a></p> 
 
\t \t \t </div> 
 
\t </div>

这里现在如果点击的字段，边框底部的颜色变为蓝色。

假设如果字段是空的，如果我点击登录按钮，如何更改边框底部的颜色蓝色到红色？意味着它应该显示这些是必需的字段。

我只需要将边框颜色更改为红色。

谢谢。

来源

2017-08-07 Melbin Mathai

您CA n使用css-selector'输入：无效{border = 2px纯红色; }'，但如果您在'inputs'中使用'required'，则ID将不起作用。 – entithat

@Cactus，我需要在我的输入中使用必需的。 –

你使用的是JavaScript吗？ jQuery的？或者你想要在普通的CSS中做到这一点？ – Subash

试试看看这个代码。 Plunker LINK

HTML

<div class="log"> 
      <input id="user" class="inputlog" type="text" required="" /> 
      <span class="highlight"></span> 
      <span class="bar"></span> 
      <label>Email Address</label> 
     </div> 
     <div class="log"> 
      <input id="pwd" class="inputlog" type="password" required="" /> 
      <span class="highlight"></span> 
      <span class="bar"></span> 
      <label>Password</label> 
     </div>

$(document).ready(function() { 

    $(".login-btn").click(function(){ 
    var user = $("#user").val(); 
    var pwd = $("#pwd").val(); 

    if(!user){ 

     $("#user").addClass("makeRed"); 
    } 
     else 
     { 
     $("#user").removeClass("makeRed"); 
     } 
    if(!pwd){ 

     $("#pwd").addClass("makeRed"); 
    } 
     else 
     { 
     $("#pwd").removeClass("makeRed"); 
     }  
    }); 
    $("#user").click(function(){ 
     $("#user").removeClass("makeRed"); 
    }); 
    $("#pwd").click(function(){ 
    $("#pwd").removeClass("makeRed"); 
    }); 
});

CSS

.makeRed{ 

     border-bottom: 1px solid red !important; 

    }

来源

2017-08-07 08:30:25 Nofi

感谢您的答案，它非常好。但是如果我有更多的领域，我需要为所有领域编写脚本。对？有没有捷径？ –

使用通用选择器$（“input”）。click（function（）{}）并遍历所有输入并相应地添加/删除类以显示/隐藏红色边框。 – Nofi

谢谢诺菲。 –

使用这个jQuery

$('form').find('input').each(function(){ 
    if($(this).prop('required')){ 
     $(this).parent().find('.bar')addClass('red-bar'); 
    } else { 
     $(this).parent().find('.bar')removeClass('red-bar'); 
    } 
});

和CSS

.bar.red-bar:before, .bar.red-bar:after { 
     background: red; 
    }

来源

2017-08-07 05:38:34

希望，这将有助于让想法来解决你的问题，HTML与编辑的登录按钮

<div class="form-desc"> 
    <div class="lock-icon"> 
    <img src=""> 
     </div> 
      <div class="login-msg"> 
       <h4>Great to have you back!</h4> 
     </div> 
     <form > 
      <div class="log">  
       <input class="inputlog" type="text" required> 
       <span class="highlight"></span> 
       <span class="bar"></span> 
       <label>Email Address</label> 
      </div> 
    <div class="log">  
       <input class="inputlog" type="password" required> 
       <span class="highlight"></span> 
       <span class="bar"></span> 
       <label>Password</label> 
      </div> 

      <div class="forgot-pswd"> 
      <a href="#">Forgot Password?</a> 
       </div> 

      <div class="login-algn"> 
       <div> 
       <input class="login-btn" type="submit" value="login"> 
       </div> 
      </div> 

<div class="new-login"> 
<p>New here?<a href="register.html"> Click here to Register</a></p> 
      </div>

JQuery的

$(".login-btn").on("click",function(){ 
    var text = $("input[type='text']"); 
    var pass = $("input[type='password']"); 

    if(!text.val()){ 
    text.css("border","2px solid red"); 

    } 

    if(!pass.val()){ 
     pass.css("border","2px solid red"); 

    }

}）;

来源

2017-08-07 07:26:32

如何在字段为空时更改边框颜色

回答

相关问题