html - CSS 文本框焦点

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 状态下忽略它。