輸入：焦點不工作

起初，我的輸入焦點工作得很好，現在突然間，當我爲輸入添加更多樣式時，突然停止工作。自從它工作以來，我只添加了'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

來源

2016-06-22 Shinji-san

使用此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

來源

2016-06-22 04:29:45 Codeone

把你: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>

來源

2016-06-22 04:16:55

輸入：焦點不工作

回答

相關問題