输入：焦点不工作

Question

起初，我的输入焦点工作得很好，现在突然间，当我为输入添加更多样式时，突然停止工作。自从它工作以来，我只添加了'input [type =“text”]和border-radius和padding以及一些边距。当您单击每个表单元素时，即使我有一个焦点规则（您可以在代码底部附近找到）也没有任何反应。有没有解决方法？

form{ 
 
    position: absolute; 
 
    left: 50%; 
 
    color: white; 
 
    margin-left: -180px; 
 
    padding: 15px 30px 15px 30px; 
 
    background-color: #26004d; 
 
    border-radius: 7px; 
 
    margin-top: 10px; 
 
    width: 300px; 
 
} 
 

 
label{ 
 
    float: left; 
 
    text-align: right; 
 
    margin-right: 15px; 
 
    width: 100px; 
 
} 
 

 
input:focus { 
 
    border: 2px solid #862d59; 
 
} 
 

 
input[type="submit"]{ 
 
    width: 50%; 
 
    background-color: #862d59; 
 
    color: white; 
 
    margin-top: 5px; 
 
    padding: 12px 12px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
input[type="text"]{ 
 
    width: 100%; 
 
    padding: 12px 12px; 
 
    margin: 4px 0; 
 
    border: 1px solid #ccc; 
 
    border-radius: 6px; 
 
    //box-sizing: border-box; 
 
}

<div id="formholder1"> 
 
    <form> 
 
    <div class="single-field"> 
 
\t <label for="Username">Username:</label> 
 
\t <input name="Name" type="text"></input> 
 
    </div> 
 
    <div class="single-field"> 
 
     <label for="Password">Password:</label> 
 
     <input name="Password" type="text"></input> 
 
    </div> 
 
    <input type="submit" value="Login"> 
 
    </form> \t 
 
</div> \t

Answer 1

使用此input[type="text"]:focus { border: 2px solid #862d59; }

学习它 - http://www.w3schools.com/cssref/trysel.asp?selector=:focus

例子 - https://css-tricks.com/snippets/css/glowing-blue-input-highlights/现在 其工作

form{ 
 
\t position: absolute; 
 
\t left: 50%; 
 
\t color: white; 
 
\t margin-left: -180px; 
 
\t padding: 15px 30px 15px 30px; 
 
\t background-color: #26004d; 
 
\t border-radius: 7px; 
 
\t margin-top: 10px; 
 
\t width: 300px; 
 
} 
 

 
label{ 
 
\t float: left; 
 
\t text-align: right; 
 
\t margin-right: 15px; 
 
\t width: 100px; 
 
} 
 
input[type="text"]:focus { 
 
\t border: 2px solid #862d59; 
 
} 
 
input:focus { 
 
\t border: 2px solid red; 
 
} 
 

 
input[type="submit"]{ 
 
width: 50%; 
 
background-color: #862d59; 
 
color: white; 
 
margin-top: 5px; 
 
padding: 12px 12px; 
 
border: none; 
 
margin-left:-10px; 
 
cursor: pointer; 
 
} 
 

 
input[type="text"]{ 
 
\t width: 100%; 
 
\t padding: 12px 12px; 
 
\t margin: 4px 0; 
 
\t border: 1px solid #ccc; 
 
\t border-radius: 6px; 
 
    margin-left:-15px; 
 

 
\t //box-sizing: border-box; 
 

 
}

<div id="formholder1"> 
 

 
\t \t \t <form> 
 
\t \t \t \t <div class="single-field"> 
 
\t \t \t \t <label for="Username">Username:</label> 
 
\t \t \t \t \t <input name="Name" type="text"></input> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="single-field"> 
 
\t \t \t \t \t <label for="Password">Password:</label> 
 
\t \t \t \t \t <input name="Password" type="text"></input> 
 

 
\t \t \t \t </div> 
 
\t \t \t \t <input type="submit" value="Login"> 
 
\t \t \t </form> \t 
 
\t \t </div> \t

Answer 2

把你:focus财产input后。

input[type="text"]:focus { 
    border: 5px solid #862d59; 
} 

form{ 
 
\t position: absolute; 
 
\t left: 50%; 
 
\t color: white; 
 
\t margin-left: -180px; 
 
\t padding: 15px 30px 15px 30px; 
 
\t background-color: #26004d; 
 
\t border-radius: 7px; 
 
\t margin-top: 10px; 
 
\t width: 300px; 
 
} 
 

 
label{ 
 
\t float: left; 
 
\t text-align: right; 
 
\t margin-right: 15px; 
 
\t width: 100px; 
 
} 
 

 

 
input[type="submit"]{ 
 
width: 50%; 
 
background-color: #862d59; 
 
color: white; 
 
margin-top: 5px; 
 
padding: 12px 12px; 
 
border: none; 
 
cursor: pointer; 
 
} 
 

 
input[type="text"]{ 
 
\t width: 100%; 
 
\t padding: 12px 12px; 
 
\t margin: 4px 0; 
 
\t border: 1px solid #ccc; 
 
\t border-radius: 6px; 
 
\t box-sizing: border-box; 
 

 
} 
 
input[type="text"]:focus { 
 
\t border: 5px solid #862d59; 
 
}

<div id="formholder1"> 
 

 
\t \t \t <form> 
 
\t \t \t \t <div class="single-field"> 
 
\t \t \t \t <label for="Username">Username:</label> 
 
\t \t \t \t \t <input name="Name" type="text"></input> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="single-field"> 
 
\t \t \t \t \t <label for="Password">Password:</label> 
 
\t \t \t \t \t <input name="Password" type="text"></input> 
 

 
\t \t \t \t </div> 
 
\t \t \t \t <input type="submit" value="Login"> 
 
\t \t \t </form> \t 
 
\t \t </div>