QLOOKアクセス解析
RSS
« 8月 2012 2月
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
 

CSSで文字を選択時の色を変更

06 5月

文字を選択して反転状態にした時、ChocoThemeのテーマに変更してからbackgroundとの関係なのか背景が白なのに選択しても青字に白の背景で選択範囲がわかりづらかった。

googleで調べてみると反転する色や文字の色を直接変更できることがわかったので書き残しときます。

やり方は2通りで両方とも編集するのはstyle.cssファイル

CSSでOSシステムカラーを利用する方法

background: Highlight;
color: InactiveBorder;

これは試してないですが、想像するに見慣れた青の背景に白文字のやつになるのではないかと・・・。

OSに依存するということなので、色が違う人も出てくると思います。

CSSで色を指定する方法

色を指定した方が見栄えがよさそうってわけで

::selection {
    background: #ffb7b7; /* Safari */
}
::-moz-selection {
    background: #ffb7b7; /* Firefox */
}

赤の部分は好きな色のコード。
青の部分はコメントアウトなのでなくてもいいです。

-moz-selectionは実験的に導入されているMozillaのUI(ユーザーインターフェース)独自の拡張プロパティなので、いつ変更で使えなくなるかは不明なので注意。

引用、参考サイト

文字を選択した時の色+文字選択時のコネタ – kokemonoの日記
クロスブラウザのためのCSSのテクニック10選「10 astonishing CSS hacks and techniques」 | DesignDevelop

 
拍手する このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
No Comments

Posted in CSS

 

Tags: , ,

Leave a Reply

 

 
 

Videos, Slideshows and Podcasts by Cincopa Wordpress Plugin