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;
}

Answer 2

问题在于选择器.comment-box input:focus。这将针对input:focus内部.comment-box，目标不存在。

选择器必须是.comment-box:focus或input:focus或.comment-form input:focus

Answer 3

对于这种情况，输入应该始终是第一个＆gt; class / id＆gt;伪类。

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

否则

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

Answer 4

我无法告诉你为什么它在这种情况下不起作用，但我建议你在实际删除大纲之前仔细考虑并阅读http://www.outlinenone.com/。它的存在使得不使用鼠标的人可以在表单输入之间导航并确定哪一个具有焦点。您的样式似乎将删除聚焦和未聚焦输入框之间的任何区别。从本质上讲，这意味着您将许多残疾人排除在使用您的网站之外。

CSS输入大纲未被删除

4 个答案: