html - 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>

你可能想要的是:

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

或者只是

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