::selectionを使う時の注意点
::selectionを使うと選択したオブジェクト（テキスト等）に対してスタイルをあてることができます。
|
1 2 3 4 5 6 7 8 9 10 |
::selection { background: #555; color: #fff; } //Firefox ::-moz-selection { background: #555C; color: #fff; } |
まぁ注意点ってほど大層なことではないのですが上記のように全ての要素に::selectionを設定した場合はフォーム系のタグに注意が必要です。 上記の場合ですとフォントカラーに白を設定しています。
この設定ですとフォーム等に使うインプットタグ無いで変換した時の文字色も白になっていしまいます。インプットの背景が白だと一瞬バグッた？みたいな事態になりかねません！（※なりません）
なのでフォームを使われる場合は別途フォームに使うタグにCSSをあてて色を変更してあげる。もしくは限られた要素に限定して::selectionを設定す必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
input[type=text]::selection, input[type=tel]::selection, input[type=number]::selection, textarea::selection, input[type=password]::selection{ color: #333; } input[type=text]::-moz-selection, input[type=tel]::-moz-selection, input[type=number]::-moz-selection, textarea::-moz-selection, input[type=password]::-moz-selection{ color: #333; } |
なんかオシャレーな感じでいいですね！
- 2015年03月25日水曜日
- ：Naruhiko Wakai
comments