初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

CSS 文字を選択した時に色を変更する

文字を選択する時に選択した文字の色を変更する方法を記述します。

f:id:bellsmarket:20150404002012p:plain:w400

<style>
.color_red::selection {
	color: red; 
}
.color_red::-moz-selection {
	color: red; 
}
li.background::selection {
	background: aqua;
}
li.background::-moz-selection {
	background: aqua;
}
li.shadow::selection {
	text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
}
li.shadow::-moz-selection {
	text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
}
li.all::selection {
	color: white;
	background: grey;
	text-shadow: 1px 2px 3px red;
}
li.all::-moz-selection {
	color: white;
	background: grey;
	text-shadow: 1px 2px 3px red;
}
</style>
<body>
<ul>
	<li>これが何もしていない通常の選択(ドラッグ)した効果です。</li>
	<li class="color_red">このテキストの選択範囲(ドラッグ)の文字が赤くなります。</li>
	<li class="background">このテキストの選択範囲(ドラッグ)が水色になります。</li>
	<li class="shadow">選択範囲(ドラッグ)のテキストに影がつきます。</li>
	<li class="all">このテキストの選択範囲が(ドラッグ)文字が白くなり、灰色の背景に赤い影がつきます。</li>
</ul>
</body>

f:id:bellsmarket:20150404002025p:plain:w400

topへ戻る