文書をマウス等で選択時の色を指定するCSS生成

html内の文書をマウスで選択したとき反転されます。この反転時の文字色・背景色をCSSで変更することが出来ます。
当ページでは簡単操作で作成することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

影は上下左右の方向に指定することが出来ます。影のぼかしや色なども指定できますので是非お試しください。
FireFox用にベンダープレフィックスを付けています。

<span class="strselect">ここをマウス選択すると<br>色を確認できます</span>

.strselect {
  color            : #000000;           /* 文字の色 */
  font-size        : 18pt;              /* 文字のサイズ */
}
 
.strselect::-moz-selection {
  color            : #ffffff;           /* 選択時の文字色 */
  background-color : #66ff66            /* 選択時の背景色 */
 
.strselect::selection {
  color            : #ffffff;           /* 選択時の文字色 */
  background-color : #66ff66            /* 選択時の背景色 */
}

CSSの疑似要素セレクタ「::selection」には、「color」「background-color」「background」「text-shadow」を指定することできます。

<span class="sample1">マウス選択で影</span>

<style type="text/css">
.sample1{
  font-size   : 30pt;
}
.sample1::-moz-selection {
  text-shadow : 5px  5px 5px red;
}
.sample1::selection {
  text-shadow : 5px  5px 5px red;
}
</style>

<span class="sample2">選択できない文書</span>

<style type="text/css">
.sample2{
  font-size          : 30pt;
  -ms-user-select    : none;
  -webkit-user-select: none;
  user-select        : none;
}
</style>