How to remove bottom line from Input text

Question

I'm working on an angular2 project with Materialize

I've done a custom style for the txt input but I can't get ride of the bottom line when the user select the input

See the red line :

Here is the style :

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

The 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>

And in the 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;
}

David Marcus David Marcus · Accepted Answer · 2017-06-20T16:19:44

This gets rid of that bottom line:

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

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

How to remove bottom line from Input text

2 Answers