範囲選択の背景色・文字色(CSS3) | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

★ 範囲選択の背景色・文字色(CSS3)


● 内容

① 範囲選択した場合の選択部分の背景色と文字の色を変えます。


● やりかた。(CSSの一番下に追加する)


① 全体に対して、指定する場合。


/* 範囲選択の背景色 文字色(全体) */
::selection {/* chrome safari */
background: #ff77ff;/* 背景色 */
color:#000000;/* 文字の色 */
}
::-moz-selection {/* Firefox */
background: #ff77ff;/* 背景色 */
color:#000000;/* 文字の色 */
}



② 記事本文のみに適用する場合。

/* 範囲選択の背景色 文字色(記事本文) */
.articleText::selection {/* chrome safari */
background: #ff77ff;/* 背景色 */
color:#000000;/* 文字の色 */
}
.articleText::-moz-selection {/* Firefox */
background: #ff77ff;/* 背景色 */
color:#000000;/* 文字の色 */
}


③ 他にも、指定した場所のみ範囲選択した背景色・文字色を変えられます。


④ 色部分をtransparentにすれば透明になります。

/* 範囲選択の背景色 文字色(記事本文) */
.articleText::selection {/* chrome safari */
background: transparent;/* 背景色 */
color:transparent;/* 文字の色 */
}
.articleText::-moz-selection {/* Firefox */
background: transparent;/* 背景色 */
color:transparent;/* 文字の色 */
}