CSSに書くだけ!文字を選択した時(ドラッグ)に背景色を変える小技

2013年04月11日

備忘録的に投稿しておきます。

どのような事ができるのか?

cssで選択色を変更前

ウェブサイトでテキストを選択した時に通常(Mac Safariの場合)はこちらの様に薄いブルーで選択範囲が取れると思います。

この選択した時のカラーを下記のように変更してしまうという小技です。

cssで選択色を変更後

本来は可視性を高めたりするときに使う小技みたいなんですが、

見えないところのデザインをちょっとしたこだわりって

意味で使ってみてもいいかもしれませんね。

設定方法

設定方法は非常に簡単です。下記の2つのソースコードをcssファイルに書き込むだけ。

[html] ::selection{ /* Safari */ background: #FF3366; /* 背景カラー */ color: #fff; /* 文字カラー */ } ::-moz-selection{ /* Firefox */ background: #FF3366; /* 背景カラー */ color: #fff; /* 文字カラー */ } [/html]



上記カラー値(#000と#fff)をお好きな値に変更して下さい。

この記事をシェアする

【カテゴリー】デザイナーブログ備忘録 【タグ】