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

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

程式語法：CSS3
語法作用：滑鼠選取文字反白時修改為不同顏色。
使用語法：::selection

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

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

範例，例如：底下的文字

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

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

請試著用滑鼠框選看看 ▼

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

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

請試著用滑鼠框選看看 ▼