CSS設定選中文字的顏色

螞蟻小編發表於2017-04-09
CSS

在預設狀態選中的文字顏色和背景顏色並不美觀，如果能夠給句網站整體的配色來設定被選中文字和背景顏色那麼將會極大的提高美觀度，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
::selection{
  background-color:#84ca7f;
  color:#000;
}
::-webkit-selection{
  background-color:#84ca7f;
  color:#000;
}
::-moz-selection{
  background-color:#84ca7f;
  color:#000;
}
</style>
</head>
<body>
<div>螞蟻部落歡迎您，只有奮鬥才會有美好的明天</div>
</body>
</html>

以上程式碼當選中文字的時候，能夠改變背景色和文字顏色，但是::selection選擇符具有瀏覽器相容性問題，這裡就不多介紹了，具體可以參閱CSS ::selection一章節。

相關文章