如何更改瀏覽器搜索結果中突出顯示的文本的樣式？

Question

在主要的瀏覽器中，如果按Ctrl-F並輸入短語，則網頁中的相應文本將突出顯示。 我想知道是否有一種方法可以自定義突出顯示的文本的樣式。

例如，是否可以在屏幕截圖中將world的顏色更改為紅色？

更新：

::selection不起作用，因為除非關閉搜索對話框，否則不會選擇文本。 看這個截圖：

Answer 1

“ 查找”功能的結果無法更改-這是默認的用戶代理樣式，我認為沒有任何標准屬性允許您執行此操作。

您可以做的就是為您使用的瀏覽器設置它，或者與設置文本選擇顏色一樣多。

瀏覽器設定

如果您只想修改特定瀏覽器的樣式，請執行以下操作：

1. Firefox-在about:config添加ui.textSelectBackgroundAttention ，並將其值設置為所需的顏色

2. Chrome-您沒有像Firefox這樣的任何隱藏設置，也無法更改AFAIK。

請注意，默認樣式也可能會從OS主題中選取查找突出顯示顏色。

文字選擇

但是，有一種樣式化文本選擇的方法 -您可以使用selection psuedo元素 -請參見下面的演示：

 .custom::selection { background: red; /* WebKit/Blink Browsers */ } .custom::-moz-selection { background: red; /* Gecko Browsers */ } 

 <div class="custom"> This is some text</div> <div>More text here</div> 

Answer 2

使用::selection ，例如：

/* For other Browsers */    
::selection {
  background: red;
  color: white;
}

/* For Firefox */
::-moz-selection {
  background: red;
  color: white;
}

看看下面的工作片段：

 ::-moz-selection { background: red; color: white; } ::selection { background: red; color: white; } 

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi unde reprehenderit voluptas! Deserunt ducimus reiciendis necessitatibus adipisci obcaecati iste alias voluptate ratione ut at exercitationem, eum, dicta, excepturi eius suscipit.</p> 

希望這可以幫助！