如何在字段爲空時更改邊框顏色

我正在嘗試創建登錄表單。這裏是例子..如何在字段爲空時更改邊框顏色

.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

如何在字段爲空時更改邊框顏色

回答

相關問題