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

Sidenote:
Я думаю, что его стоит отметить, что на ваших hover состояний, вам нужно всего лишь указать свойства, которые изменяются на этом состоянии. Например, если цвет текста элемента белый, и вы хотите, чтобы он все еще был белым на зависании, вы можете опустить это в состоянии hover.

Answer 2

Синевато-сияние исходит из стилей по умолчанию. Чтобы удалить это, попробуйте:

input { 
    outline: none; 
} 

Это удалит его от пользователя, пароля и при нажатии кнопки.

JS Fiddle

Answer 3

использование

input { 
    outline: none; 
}  

или изменить

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

в

border: 0px;