我尝试使用“outline:0”，但这并不能改变任何事情。
null
#input_field {
outline: 0;
width: fit-content;
margin: auto;
margin-top: 20%;
border-radius: 30px;
border: 2px solid turquoise;
padding: 6px;
}<div id="input_field">
<input type="text" name="q" size="50">
</div>null
我还需要其他输入的大纲。
已更新:
.lucky_pos, .button_search_pos{
text-align: center;
padding:1px;
margin: 0;
flex-direction: row;
}
因为我不想更新其他人，这里有一个关于其他人的。css。 大纲应该只适用于#input_field。 提前谢谢你！
您可以这样做:
玩来玩去。
null
#input_field {
width: fit-content;
margin: auto;
margin-top: 20%;
border-radius: 30px;
border: 2px solid turquoise;
padding: 6px;
}
.OutlineNotNeeded {
border: none;
}
.OutlineNotNeeded:focus {
outline: 0;
}<div id="input_field">
<input type="text" class="OutlineNotNeeded" name="q" size="50">
</div>
您需要移除焦点上输入上的轮廓。
#input_field > input:focus {
outline:none;
}
要移除边框（这可能会使你变得很迷惑，因为它看起来和轮廓一样，即使在对焦时也会一直留在那里，除非你移除它），你可以添加:
#input_field > input {
border:none;
}
如果你只想在对焦时看到边框，你可以:
#input_field > input {
border:none;
}
#input_field > input:focus {
border:1px solid #000;
}
您只需要为input标记放置一个不同的类或id，就可以将大纲设置为焦点/非焦点。 焦点状态是当输入为单击时所采取的操作。
input.showoutline:focus{
outline: color type size;
}
input.hideoutline:focus{
outline: 0;
}
<input class="showoutline"/>
<input class="hideoutline"/>
