html和css中的无边框文本输入[duplicate]

ybzsozfc  于 2023-01-28  发布在  其他
关注(0)|答案(1)|浏览(135)
    • 此问题在此处已有答案**:

How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate](11个答案)
3天前关闭。
我试着在HTML和CSS中输入无边框的文本,我已经成功地做到了,但是每当我点击输入字段时,它会出现一个新的黄色边框来代替我去掉的边框。我假设这是默认的样式表,但我似乎无法覆盖它。

div.field input {
  width: 65%;
  height: 30px;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
<div class="field">
  <input type="text" placeholder="Username" name="user">
</div>
ws51t4hk

ws51t4hk1#

只需将css大纲属性设置为none,
像这样

div.field input {
    width: 65%;
    height: 30px;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline:none;
}
<div class="field">
   <input type="text" placeholder="Username" name="user">
</div>

相关问题