使用 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; //文字修改為白色
}
<div class=”test”>文字…</div>

請試著用滑鼠框選看看 ▼

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

 

範例2、改為橙色,程式碼:

.test2{
padding:15px;
border:4px solid #333;
}
.test2::selection {
background: orange; //背景修改為橙色
color: #fff; //文字修改為白色
}
<div class=”test2″>文字…</div>

請試著用滑鼠框選看看 ▼

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

喜歡這篇文章的話
請按個讚或者分享支持一下!

喜歡這篇文章的話
請按個讚或者分享支持一下!

最新的教學及情報資訊都在INMAG!

作者簡介

Avatar photo
寫好每一篇文章讓各位都能學習到各種小知識,希望大家會喜歡!