如何从输入文本中删除底线
我正在使用Materialize处理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;
}
这摆脱了底线：
input[type=text]:focus:not([readonly]) {
box-shadow: none;
border-bottom: none;
}
input[type=password]:focus:not([readonly]) {
box-shadow: none;
border-bottom: none;
}