CSS textbox focus

Question

我試圖在文本框中禁用/刪除邊框或藍色發光。

.user { 
    width: 300px; 
    height: 50px; 
    background-color: rgba(222,222,222,.0); 
    border: 2px solid rgba(222,222,222,0); 
    padding-left: 5px; 
    padding-right: 5px; 
    font-family: arial; 
    margin-bottom: -8px; 
    color: #ffffff; 
} 

.user::-webkit-input-placeholder { 
    color: #ffffff; 
} 

.password { 
    width: 300px; 
    height: 50px; 
    border: #e9e9e9; 
    background-color: rgba(222,222,222,.0); 
    border: 2px solid rgba(222,222,222,0); 
    padding-left: 5px; 
    padding-right: 5px; 
    font-family: arial; 
    margin-top: -8px; 
} 

.password::-webkit-input-placeholder { 
    color: #ffffff; 
} 

的組成部分：

<form method="post" class="login_form"> 
    <div style="font-size: 20px; font-family: bebasregular; text-align: right; color: #ffffff;">Login</div> 
    <input type="text" name="user" class="user" id="user" placeholder="Username or Email"/> 
    <hr/> 
    <input type="password" name="password" class="password" placeholder="Password"/><br/> 
    <input type="submit" name="login_btn" class="login_btn" value="Login"/> 
</form> 

現在，我想說明的是，在形成兩個文本框將變得透明，甚至是他們關注的焦點。

我在下面試過這段代碼，但它不起作用。

.user{ 
    width: 300px; 
    height: 50px; 
    background-color: rgba(222,222,222,.0); 
    border: 2px solid rgba(222,222,222,0); 
    padding-left: 5px; 
    padding-right: 5px; 
    font-family: arial; 
    margin-bottom: -8px; 
    color: #ffffff; 
} 

.user:focus{ 
    width: 300px; 
    height: 50px; 
    background-color: rgba(222,222,222,.0); 
    border: 2px solid rgba(222,222,222,0); 
    padding-left: 5px; 
    padding-right: 5px; 
    font-family: arial; 
    margin-bottom: -8px; 
    color: #ffffff; 
} 

.user::-webkit-input-placeholder { 
    color: #ffffff; 
} 

.password { 
    width: 300px; 
    height: 50px; 
    border: #e9e9e9; 
    background-color: rgba(222,222,222,.0); 
    border: 2px solid rgba(222,222,222,0); 
    padding-left: 5px; 
    padding-right: 5px; 
    font-family: arial; 
    margin-top: -8px; 
} 

.password:focus { 
    width: 300px; 
    height: 50px; 
    border: #e9e9e9; 
    background-color: rgba(222,222,222,.0); 
    border: 2px solid rgba(222,222,222,0); 
    padding-left: 5px; 
    padding-right: 5px; 
    font-family: arial; 
    margin-top: -8px; 
} 

.password::-webkit-input-placeholder { 
    color: #ffffff; 
} 

Answer 1

您可以通過添加：outline: none;來刪除此。 user類（或任何元素可能會收到大綱）：

JS Fiddle

旁註：
我認爲它值得指出的是，在你的hover狀態，你只需要指定更改屬性在那個狀態。例如，如果元素文本顏色最初是白色的，並且您希望它在懸停狀態下仍爲白色，則可以在hover狀態中省略該顏色。

Answer 2

藍色的光芒來自默認的輪廓樣式。要將其刪除，請嘗試：

input { 
    outline: none; 
} 

這將從用戶，密碼以及按下按鈕時將其刪除。

JS Fiddle

Answer 3

使用

input { 
    outline: none; 
}  

或更改

border: 2px solid rgba(222,222,222,0); 

到

border: 0px;