[css]selectに:read-onlyは止めておけという話（:not()の話）

装飾の話。

どういうアレか
原因と対処法
1. selectにreadonlyは無い
2. :not()で除外すれば良い

どういうアレか

formの諸々をデザインするとき、inputの色々、textarea、selectは統一感持たせたデザインにしなきゃなんで、一括で指定しちゃえば楽だというのはwebに慣れてる人ならみんな思うことだと思う。

:is(input[type="text"],input[type="number"],input[type="date"],input[type="email"],input[type="tel"],input[type="password"],textarea,select){
}

で、こんな感じに色々やるのを思いつく。

:is(input[type="text"],input[type="number"],input[type="date"],input[type="email"],input[type="tel"],input[type="password"],textarea,select){
    &::placeholder{
    }
    &:hover{
    }
}

基本的にこれでやっていけるんだけど、readonlyに関してはダメ。

:is(input[type="text"],input[type="number"],input[type="date"],input[type="email"],input[type="tel"],input[type="password"],textarea,select){
    &:read-only{
    }
}

なんで駄目かといえば、:read-onlyで指定した内容がselectに適用される動作になる。

原因と対処法

仕様がわかってれば引っかからない話。

selectにreadonlyは無い

<select>にreadonlyが無いんだから、無いものを指定なんかできない。

その代わりにブラウザがどう処理するかといえば、:read-onlyを無視して適用してくる。

だから今回みたいな話になる。

:not()で除外すれば良い

CSSの:is()は便利だし、SCSSは階層にできるし、重複しまくるのがわかってることをいちいち一個ずつ書いていくのは今更だと特に、超だるい。

だったら自分が指定したグループの中から特定して除外しちゃえば良い。

:is(input[type="text"],input[type="number"],input[type="date"],input[type="email"],input[type="tel"],input[type="password"],textarea,select){
    &:read-only:not(select){
    }
}

普通は要素に:not()を繋げて特定のclassを除くのに使うんだろうけど、こんな感じで指定した要素群から特定要素を除く、処理としては二度手間なんだけどやりたいことができる。助かる。

嬉しいですね。