我遇到了一个问题,即尽管尝试了两种 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;
}
最佳答案
.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;
}
关于html - CSS 输入大纲未被删除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41655841/