删除下划线边框实体化输入文本

Question

我尝试使文本框的边框底部（输入文本）消失。

它正在使用border-bottom: none但是当我写东西时，边框会再次出现。我想让绿线消失（当我在输入中写入时，图像显示页面。）

有什么想法吗？

Answer 1

在materialize.css中

textarea:focus {
  border-bottom: 1px solid #03a9f4;
  -webkit-box-shadow: 0 1px 0 0 #03a9f4;
  -moz-box-shadow: 0 1px 0 0 #03a9f4;
  box-shadow: 0 1px 0 0 #03a9f4;
}

您可以将颜色代码替换为您想要更改下划线的颜色代码。

textarea:focus {
  border-bottom: 1px solid orange;
  -webkit-box-shadow: 0 1px 0 0 orange;
  -moz-box-shadow: 0 1px 0 0 orange;
  box-shadow: 0 1px 0 0 orange;
}

或删除它：

textarea:focus {
  border-bottom: none!important;
  box-shadow: none!important;
}

这是代码：

这是结果：

Answer 2

  

你看到的是没有边框的轮廓。为了修复它使用outline: none;

例如：

＆＃13;

＆＃13;

input[type="text"] {
  border-bottom: none;
  outline: none;
}

＆＃13;

<input type="text" name="">

＆＃13;

＆＃13;

＆＃13;