Структура ввода CSS-кода не удалена

Question

У меня возникла проблема, когда синяя контур по умолчанию, когда поля ввода сфокусированы, не удаляется, несмотря на попытку использования двух методов CSS для удаления контура. Я попытался использовать input:focus и input[type="text"]:focus, но ни один из них не удаляет этот контур. Что я могу сделать с моим CSS?

Вот моя форма с comment-box ввода:

<div class="comment-form"> 
    <form action="/app/blog/{{this.blogId}}/comment" method="post"> 
     <label for="data-comment">Comment:</label> 
     <br /> 
     <input type="text" name="comment" class="comment-box"> 
     <button type="submit" class="comment-submit">Comment</button> 
    </form> 
</div> 

Вот CSS (input.comment-box CSS работает):

input.comment-box { 
    width: 80%; 
    box-sizing: border-box; 
    border: 2px solid #D8D8D8; 
    border-radius: 4px; 
} 

.comment-box input:focus { 
    border: 2px solid #D8D8D8; 
    outline: none !important; 
} 

Answer 1

.comment-box input:focus означает поле ввода внутри .comment-box класса, т.е.

<div class="comment-box"> 
    <input type="text"> 
</div> 

Что вы про bably хочу:

input.comment-box:focus { 
    outline: none; 
} 

или просто

.comment-box:focus { 
    outline: none; 
} 

Answer 2

Проблема с селектором .comment-box input:focus. Это будет нацелено на input:focus внутри .comment-box, которого не существует.

Селектор либо должен быть .comment-box:focus или input:focus или .comment-form input:focus

Answer 3

В этом случае вход должен всегда приходит первый класс>/ID> псевдо-класс.

input.comment-box:focus { 
    outline: none; 
} 

В противном случае

.comment-form input:focus { 
    outline: none; 
} 

Answer 4

Я не могу сказать вам, почему это не работает в этом случае, но я полагаю, что вы думаете, тщательно и читать http://www.outlinenone.com/, прежде чем вы на самом деле удалить контур. Он существует так, что кто-то, кто не использует мышь, может перемещаться между входными данными формы и определять, какой из них имеет фокус. Похоже, что ваши стили будут удалять ЛЮБОЕ различие между сфокусированным и нефокусированным полем ввода. По сути, это означает, что вы исключаете многочисленных людей с ограниченными возможностями из своего веб-сайта.