CSS textbox focus - html

Question

I am trying to disable/remove the border or the blue glow in the text box.
.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;
}
The form part:
<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>
Now, what I'm trying to make is that the two text boxes in the form will become transparent, even they're in focus.
i tried this code below, but it doesn't work.
.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

You can remove this by adding: outline: none; to the .user class (or any element that may receive the outline):
JS Fiddle
Sidenote:
I think its worth noting that on your hover states, you only need to specify the properties that change on that that state. For instance, if the element text color is white initially, and you want it to still be white on hovered state, you can omit that on the hover state.

Answer 2

The bluish glow is coming from the default outline styles. To remove it try:
input {
outline: none;
}
This will remove it from the user, password, and when the button is pressed.
JS Fiddle

Answer 3

use
input {
outline: none;
}
or change
border: 2px solid rgba(222,222,222,0);
to
border: 0px;