CSS 输入大纲没有被删除答案

【问题标题】：CSS Input Outline Not Being RemovedCSS 输入大纲没有被删除
【发布时间】：2017-05-30 01:53:17
【问题描述】：

我遇到了一个问题，即尽管尝试了两种 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;
}

【问题讨论】：

很难从您的代码中看出。我建议去检查员并选择元素。然后点击右边tot element.style 再试一次。如果这不起作用，右键单击元素并转到复制->选择器应该是徒劳的。选择元素并在样式选项卡下找出使焦点文本块出现蓝色轮廓的原因，它一定是什么。

标签： html css input focus

【解决方案1】：

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

【讨论】：

【解决方案2】：

问题在于选择器.comment-box input:focus。这将针对 .comment-box 内部的 input:focus，而后者并不存在。

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

【讨论】：

【解决方案3】：

在这种情况下，输入应始终放在第一位 > 类/id > 伪类。

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

否则

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

【讨论】：

【解决方案4】：

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

【讨论】：