ConneCre

connelog

RSS

文字を選択した際の背景色などの指定

CSS3をサポートしているブラウザ以外は無視されますが、ctrl+Aなどで文字を選択した際の背景色などの指定方法についてメモ。

上がCSS3をサポートしているブラウザを対象とした疑似クラスで、下がMozillaの拡張です。

  1. ::selection {
  2.     background: #ff0011;
  3.     color: "fff ;
  4. }

  5.  
  6. /* Firefox */

  7. ::-moz-selection {
  8.     background: #ff0011;
  9.     color: "fff ;
  10. }

::selectionで指定できる要素は、color, background, cursor ,outlineです。
background-imageは使用しても無視されるようです。

また、特定の箇所で色選択をしたい場合は、

  1. div.foo::selection {
  2.     background: #ff0011;
  3. }

などで指定します。


■参考URL

Selectors[W3C]
Overriding The Default Text Selection Color With CSS[CSS-TRICS]

PAGE TOP