如何在浏览器搜索结果中更改突出显示文本的样式?

时间:2016-12-20 14:13:52

标签: html css google-chrome firefox browser

在主流浏览器中,如果我按Ctrl-F并输入短语,则会突出显示网页中的相应文字。我想知道是否有一种方法可以自定义突出显示的文本的样式。

screenshot

e.g。是否可以在屏幕截图中将world的颜色更改为红色?

更新:

::selection不起作用,因为除非我关闭搜索对话框,否则不会选择文本。见这个截图:

screenshot

2 个答案:

答案 0 :(得分:2)

查找功能的结果无法更改 - 这是默认的用户代理样式,我不认为有任何标准属性允许您这样做。

你能做什么是为你使用的浏览器设置它,或者只是设置文本选择颜色。

浏览器设置

如果您只想修改特定浏览器的样式 - 请参阅您可以执行的操作:

  1. Firefox - 在ui.textSelectBackgroundAttention

  2. 中添加about:config值作为您需要的颜色
  3. Chrome - 您没有像Firefox这样的任何隐藏设置,也无法更改它AFAIK。

  4. 请注意,默认样式也可以从OS主题中选择查找突出显示颜色。

    文字选择

    但是,有一种方式可以设置文本选择 - 您可以使用selection psuedo element - 请参阅下面的演示:

    
    
    .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>
    &#13;
    &#13;
    &#13;

答案 1 :(得分:1)

使用::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>

希望这有帮助!