2017-03-10 3 views
0

テキストエリアで「無効」を使用すると、テキストエリアやその他の属性が変更されます。テキストエリア内に同じCSSを記述することなく、どのようにテキストエリアのスタイルを維持できますか?適切な使用がケースに依存して - 私はあなたが最終的にCSSを作るためにプリプロセッサを使用しているので、「ミックスイン」/「拡大」を使用するためのオプションがあり、入力入力エレメントのスタイルを維持する方法はありますか?もう一度同じCSSを書くことなく?

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? 
} 
+3

あなたはセレクタを組み合わせる方法を知っているようだ...なぜあなたは単に 'テキストエリア、TEXTAREA使用することはありません:'の代わりに '無効を{} textarea {} 'を使用し、両方に適用したいスタイルをグループ化しますか? –

答えて

0

を提供しないようにしたいです。ドキュメントをチェックしてください。グループ化昔ながらのCSSセレクタはそのように、便利にもなります

textarea, textarea: disabled { 
    width: 100%; 
    resize: none; 
    /* other properties here... */ 
} 
関連する問題