1. 程式人生 > >css樣式設定滑鼠選中後字型顏色以及背景顏色

css樣式設定滑鼠選中後字型顏色以及背景顏色

做後臺的要涉及前臺我也是醉了

一個不是那麼眾所周知的技術就是我們可以在瀏覽器里美化被選擇的文字的樣式。Windows自身提供的是一種很難看的墨綠色的顏色,而蘋果電腦上提供的是淺綠色。火狐瀏覽器,IE9,Opera和谷歌瀏覽器允許我們自定義被選擇文字的顏色。讓我來展示給你看:

css示例程式碼:

/* webkit, opera, IE9 */
::selection { background:lightblue; color:red;}//選中後背景顏色是淺藍,字型顏色為紅色
/* mozilla firefox */
::-moz-selection { background:lightblue;color:red; }//選中後背景顏色是淺藍,字型顏色為紅色

-moz-屬性字首是個火狐瀏覽器用的,而基本的::selection選擇器是給谷歌瀏覽器用的。跟其它CSS選擇器的用法一樣,你可以巢狀使用,在不同的地方顯示不同的顏色:

示例程式碼:

/* webkit, opera, IE9 */
div.highlightBlue::selection { background:lightblue; }
/* mozilla firefox */
div.highlightBlue::-moz-selection { background:lightblue; }</p><p>/* webkit, opera, IE9 */
div.highlightPink::selection { background:pink; }
/* mozilla firefox */
div.highlightPink::-moz-selection { background:pink; }