CSS3 ::selection 滑鼠框選反白修改預設顏色

在網頁框選文字時預設大多為藍底白字，製作網頁時就能使用 CSS3 的語法::selection來修改滑鼠框選時反白的顏色來增加多樣性，這次就來教學怎麼使用此項語法囉。

::selection 使用方法

使用方法很簡單，只需要將選擇器後面接上 ::selection 就行了。

div 的 id 或 class 加上::selection，除了這個以外大部分的像body、p …等等也能接上去使用。

::selection範例

範例1、改為綠色，程式碼：

.test{
padding:15px;
border:4px solid #333;
}
.test::selection {
background: green; //背景修改為綠色
color: #fff; //文字修改為白色
}

<div class="test">
Google 短網址先前有介紹過是個將網址縮短的服務，而這項服務有個小秘技能快速查詢報表以及 QR Code 的方法，這次就來教學這項小秘技囉。
</div>

請試著用滑鼠框選看看 ▼

範例2、改為橙色，程式碼：

.test2{
padding:15px;
border:4px solid #333;
}
.test2::selection {
background: orange; //背景修改為橙色
color: #fff; //文字修改為白色
}

<div class="test2">
Google 短網址先前有介紹過是個將網址縮短的服務，而這項服務有個小秘技能快速查詢報表以及 QR Code 的方法，這次就來教學這項小秘技囉。
</div>

請試著用滑鼠框選看看 ▼