如何从输入文本中删除底线答案

【问题标题】：How to remove bottom line from Input text如何从输入文本中删除底线
【发布时间】：2017-11-23 07:06:39
【问题描述】：

我正在使用 Materialize 进行 angular2 项目

我已经为 txt 输入做了一个自定义样式，但是当用户选择输入时我无法理解底线

见红线：

风格如下：

@import "变量"; /* * InputText 的样式，覆盖材料设计以获得更盒装的设计。 */ .style-input 输入：not([type=submit]):not([type=file]) { box-sizing：边框框； -webkit-box-sizing：边框框； -moz-box-sizing：边框框；宽度：100%；高度：200%；填充：20px；边距：0；大纲：无；边框：无；背景颜色：$灰色； } .style-input 输入：not([type=submit]):not([type=file]):hover, .style-input 输入：not([type=submit]):not([type=file]):focus { 大纲：无；边框：无；背景颜色：$深灰色； } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ 颜色：$深灰色； } :-moz-placeholder { /* Mozilla Firefox 4 到 18 */ 颜色：$深灰色；不透明度：1； } ::-moz-placeholder { /* Mozilla Firefox 19+ */ 颜色：$深灰色；不透明度：1； } :-ms-input-placeholder { /* Internet Explorer 10-11 */ 颜色：$深灰色； } :-ms-input-placeholder { /* Microsoft Edge */ 颜色：$深灰色； }

html：

     <div class="row">
        <div class="col s12">
          <input class="user-field" id="username" type="text" placeholder="Identifiant">
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          <input class="password-field" id="password" type="password" placeholder="Mot de passe">
        </div>
      </div>

在css中：

.user-field {
  background: url(../../../../assets/img/auth/UserPicto.svg) no-repeat calc(100% - 12px);
  background-size: 24px auto;
  display: inline-block;
  vertical-align: middle;
  padding-right: 24px;
}

.password-field {
  background: url(../../../../assets/img/auth/CadenasPicto.svg) no-repeat calc(100% - 12px);
  background-size: 24px auto;
  display: inline-block;
  vertical-align: middle;
}

【问题讨论】：

标签： javascript css angular sass styles

【解决方案1】：

你可以使用这个css代码：

input [type=text]{ outline: none; }

它可以很容易地删除轮廓边框。

【讨论】：

【解决方案2】：

这摆脱了底线：

input[type=text]:focus:not([readonly]) {
  box-shadow: none;
  border-bottom: none;
}

input[type=password]:focus:not([readonly]) {
  box-shadow: none;
  border-bottom: none;
}

【讨论】：