Question

当在textarea上使用“disabled”时，它会更改其文本颜色和其他属性，如何保持textarea的样式而不必在textarea中写入相同的css：disabled？我只想避免提供输入

input, textarea {
outline: none;
border: none;
display: block;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
font-family: $ptsans;
font-size: rem(16);
color: $text-color;
@include placeholder {
    color: $placeholder;
}
background-color: #fff !important;
}

p {
line-height: rem(21);
}


textarea {
  width: 100%;
  resize: none;
  background-color:transparent!important;
  &.editable {
     width:97%;
     padding:10px;
     background-color:#fff!important;
     height:80px;
     border-color:#ced2db ;
     border-radius: 3px;
     border-style: solid;
    border-width: 1px;
  }
}
textarea:disabled {
//Should I write all same styles here again?
}

Answer 1

由于您使用预处理器制作最终CSS，因此可以选择使用“mixin”/“extend” - 正确使用取决于大小写。请检查文档。普通的旧CSS选择器分组也可以派上用场，比如：

textarea, textarea: disabled {
    width: 100%;
    resize: none;
    /* other properties here... */
}

有没有办法维持输入元素的样式：禁用？没有再写同一个CSS？

1 个答案: