2017-03-03 30 views
-1

问题是我有需要的输入,我有一些:当我尝试发送值空的边框红色从所需的显示和doenst点击它时,我点击它,所以我有一个从重点和红色边框奇怪的绿色边框的需要可以约1帮我删除所需要的点击后输入重点和要求

\t \t \t \t .form-login { 
 
\t \t \t \t \t width : 400px; 
 
\t \t \t \t \t height: auto; 
 
\t \t \t \t \t position : absolute; 
 
\t \t \t \t \t padding : 10px 25px; 
 
\t \t \t \t \t background-color: #ddd; 
 
\t \t \t \t \t left: 50%; 
 
\t \t \t \t \t top: 50%; 
 
\t \t \t \t \t transform: translateX(-50%) translateY(-50%); 
 
\t \t \t \t \t border: none; 
 
\t \t \t \t \t border-top-right-radius: 5px; 
 
\t \t \t \t \t border-top-left-radius: 5px; 
 
\t \t \t \t } 
 
\t \t \t \t .forminputs{ 
 
\t \t \t \t \t width : 100%; 
 
\t \t \t \t \t position : relative; 
 
\t \t \t \t \t margin :25px auto; 
 
\t \t \t \t } 
 
\t \t \t \t .input { 
 
\t \t \t \t \t width: 100%; 
 
\t \t \t \t \t height: 50px; 
 
\t \t \t \t \t background:gray; 
 
\t \t \t \t \t position: relative; 
 
\t \t \t \t \t margin:15px auto; 
 
\t \t \t \t } 
 
\t \t \t \t input[type="text"], 
 
\t \t \t \t input[type="password"]{ 
 
\t \t \t \t \t width:100%; 
 
\t \t \t \t \t height:50px; 
 
\t \t \t \t \t position: relative; 
 
\t \t \t \t \t outline :none; 
 
\t \t \t \t \t border:1px solid gray; 
 
\t \t \t \t \t border-radius: 3px; 
 
\t \t \t \t \t font-size:16px; 
 
\t \t \t \t \t font-family: 'Questrial',sans-serif; 
 
\t \t \t \t \t padding-left: 30px; 
 
    \t \t \t \t  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
 
        -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
 
    \t \t \t \t  box-sizing: border-box;   /* Opera/IE 8+ */ 
 
\t \t \t \t } 
 
\t \t \t \t input[type="text"]:focus, input[type="password"]:focus{ 
 
\t \t \t \t \t border:2px solid #50C878; 
 
\t \t \t \t } 
 
\t \t \t \t input[type="submit"]{ 
 
\t \t \t \t \t position: relative; 
 
\t \t \t \t \t background-color:#50C878; 
 
\t \t \t \t \t width : 100px; 
 
\t \t \t \t \t height : 40px; 
 
\t \t \t \t \t font-family: 'Questrial',sans-serif; 
 
\t \t \t \t \t text-transform: uppercase; 
 
\t \t \t \t \t color: #FFF; 
 
\t \t \t \t \t font-weight: bold; 
 
\t \t \t \t \t font-size: 17px; 
 
\t \t \t \t \t cursor: pointer; 
 
\t \t \t \t \t border: none; 
 
\t \t \t \t \t border-radius: 5px; 
 
\t \t \t \t \t float:right; 
 
\t \t \t \t \t margin-bottom: 20px; 
 
\t \t \t \t \t margin-top:10px; 
 
\t \t \t \t }
\t \t \t <form class="form" name="form" method="post" action="login-m.php"> 
 
\t \t \t \t <section class ="input"> 
 
\t \t \t \t \t <input type="text" name="utilizador" value="" placeholder="Insira o nome de utilizador" required/><br> 
 
\t \t \t \t \t <i class="fa fa-user"></i> 
 
\t \t \t \t </section> \t \t 
 
\t \t \t \t <section class ="input"> \t 
 
\t \t \t \t \t <input type="password" name="palavrachave" value="" placeholder="Insira a palavra-chave" required/><br> 
 
\t \t \t \t \t <i class="fa fa-lock"></i> 
 
\t \t \t \t </section> 
 
\t \t \t \t <a href="#">Esqueceu a palavra-chave ?</a><br> 
 
\t \t \t \t <input type="submit" name ="entrar" value="Entrar"><br> 
 
\t \t \t \t <p> Nome de Utilizador e/ou<br> Palavra-chave incorreto(s)</p> 
 
\t \t \t </form>

+0

你有没有试过'输入[required]:focus {}'?如果您的验证过程为您的输入或其容器添加了类,那么您是否尝试过使用这些选择器?你有没有采取任何措施来解决问题,除了在[so]上寻求帮助? –

+0

没有工作......不知道该怎么办 –

+0

您需要了解如何检查和确定哪些选择器将当前规则应用于您的元素。如果你想自己做这件事,那就没有办法。如果你不提供[mcve],我们也帮不了你。 –

回答

0

不是你的问题的完整解决方案,但这里是一些有用的信息。

您可以在CSS中使用:required和:无效选择器来更改这些对象的样式。它们可以与其他选择器链接,例如输入:无效:焦点。这应该让你修改样式并删除双重发光边框。

+0

':invalid'只适用于['Constraint validation'](https://developer.mozilla.org/en-US/docs/Web /指南/ HTML/HTML5/Constraint_validation)。目前大多数库不使用它们进行验证(因为它们不是跨浏览器的),而是依赖于添加到表单元素的自定义类。 –