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

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

• javascript
• css
• angular
• sass
• styles

Share Improve this question Follow asked Jun 20, 2017 at 16:12 An-droidAn-droid 6,4851010 gold badges5151 silver badges9595 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

you can use this css code:

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

it can delete outline border very easy.