Question

我正在使用Materialise

处理angular2项目

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

见红线：

这是风格：

    @import "variables";

    /*
     * Style for InputText, override material-design for a more boxed design.
     */

    .style-input input:not([type=submit]):not([type=file]) {
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      width: 100%;
      height: 200%;
      padding: 20px;
      margin: 0;
      outline: none;
      border: none;
      background-color: $grey;
    }

    .style-input input:not([type=submit]):not([type=file]):hover,
    .style-input input:not([type=submit]):not([type=file]):focus {
      outline: none;
      border: none;
      background-color: $dark-grey;
    }

    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
      color: $darker-grey;
    }

    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: $darker-grey;
      opacity: 1;
    }

    ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: $darker-grey;
      opacity: 1;
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: $darker-grey;
    }

    :-ms-input-placeholder { /* Microsoft Edge */
      color: $darker-grey;
    }

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;
}

Answer 1

这摆脱了这个底线：

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

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

Answer 2

您可以使用以下CSS代码：

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

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

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

2 个答案: