CSS怎么更改選中文本的背景顏色

這篇文章主要介紹“CSS怎么更改選中文本的背景顏色”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS怎么更改選中文本的背景顏色”文章能幫助大家解決問題。

1. 禁用用戶選中一個元素（element）的文本

使用屬性 user-select，并且將它的值設置為 none ，我們可以將一個元素的文本設置為不能被用戶選中。

element {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

當你不想一個元素的原始內容被復制時，可以使用這個屬性。

2. 更改選中文本的背景顏色

使用選擇器::selection，可以更改選中文本的背景顏色：

::selection {
  color: #ececec;
  background: #222831;
}

當你使用這個屬性時，注意使用良好的顏色對比度組合。

3. 在不使用br的情況下將文本換行

使用屬性white-space，并將它的值設置為pre-wrap或pre-line：

element {
  white-space: pre-wrap; /*pre-wrap*/
  white-space: pre-line; /*pre-line*/
}

4. 設置字與字之間的間距

這對你來說可能有點簡單。但是直到我搜索這個需求時，我才知道有這個設置。

你可以使用word-spacing這個屬性來設置文本中詞與詞之間的間隔。

element {
  word-spacing: 6px; /* word spacing wow such */
}

5. 在瀏覽器中隱藏難看的滾動條

我以前甚至不知道這是可以做到的。

要實現這個目的，你必須為不同的瀏覽器，準備不同的代碼：

/* Hide scrollbar for Chrome, Safari, and Opera */
html::-webkit-scrollbar {
  display: none;
}


/* Hide scrollbar for IE and Edge */
html {
  -ms-overflow-style: none;
}

如果你禁用了滾動條，那么你需要確保提供上/下按鈕和其他方便的導航選項。請注意，Firefox停止了對滾動條隱藏問題的支持，以上代碼似乎是一個技巧，可以執行與我包含的其他代碼相同的功能。

關于“CSS怎么更改選中文本的背景顏色”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。