使用CSS3改变文本选中的默认颜色

操作方法

  • 01

    关于浏览器文字选中颜色 以我的系统举例（xp 默认主题），浏览器上页面文字选中后默认的背景色是一种蓝色， 不同浏览器的颜色有些许差异，但大致相同，文字颜色也近乎白色，如下图所示，截自Firefox3.6浏览器： 在CSS3的爸爸妈妈还没有相亲认识的时候，要改变页面上文字选中后的背景色以及文字颜色，就跟让太监生孩子一样困难。但是，随着CSS3呱呱落地，获得越来越多的浏览器认可，一切又显得那么自然而然。虽然有些顽固的糟老头（如IE浏览器）还不认可这个新生的CSS3，但是，丝毫不影响其在其他浏览器上对UI的又一次改进。 目前Firefox、Safari、Chrome以及Opera浏览器都支持文本选择属性，如果浏览器不支持该属性，会直接忽略它，所以不会产生任何不良的影响。 下面就简单展示下这个改进UI体验的小技巧。 二、改变默认选中颜色 首先，简单点的例子，我们可以设置整个页面文本选中的基本样式，如下： ::selection { background:#d3d3d3; color:#555; } ::-moz-selection { background:#d3d3d3; color:#555; } ::-webkit-selection { background:#d3d3d3; color:#555; } 于是，文本选中的默认蓝色背景就此变成了淡灰色，如下图所示，截自Chrome浏览器： 当然，我们可以使用CSS选择器指定特定标签内容文字选中后的样式状态，例如下面所展示的栗色选中状态： .maroon::selection { background:maroon; color:#fff; } .maroon::-moz-selection { background:maroon; color:#fff; } .maroon::-webkit-selection { background:maroon; color:#fff; }<p>...文字内容。</p> 会得到类似下图的效果： 同样的，你可以根据自己的需要，指定CSS选择器以及对应内容文字/图片等的选中样式，这里就不一一举例了。

赞 (0)

相关推荐

  • PPT如何改变链接文字的默认颜色

    Powerpoint2003中如果对文字做了超链接或动作设置，那么powerpoint会给它一个默认的文字颜色和单击后的文字颜色。但这种颜色可能与咱们预设的背景色很不协调，想更改吗?那么可以点击菜单命 ...

  • wps2019中怎么将字体的默认颜色进行改变

    wps2019中怎么将字体的默认颜色进行改变

    WPS 2019是我们现在经常使用的办公软件之一,今天小编就告诉大家wps2019中怎么将字体的默认颜色进行改变.具体如下:1. 首先我们打开电脑中的一份wps文档,进入主界面之后点击开始工具栏上的& ...

  • 如何更改UG12.0中模型的默认颜色

    UG软件安装好后,模型的默认颜色是土黄色:如果不想模型显示这种颜色该怎么做呢? 操作方法 01 下图是默认的模型颜色,如果觉得这种颜色不好,想要更换该怎么做呢? 02 可以选择编辑菜单中的对象 显示( ...

  • 怎样改变WPS文字超链接的颜色

    WPS超链接的文本默认颜色是蓝色,如果我们想要把超链接的颜色变成其他的颜色应该怎么做呢? 步骤/方法 01 ​我们选中一下超链接的文字.点击--开始字体颜色. 02 选中字体颜色的下拉框,选中为红色, ...

  • word怎么更改文本框线条的颜色和背景颜色呢?

    在用word文字处理系统打字时,常要用到文本框,那么为了美化文档,如何来更改文本框线条的颜色和背景颜色呢?下面我们一起来看看吧! 方法/步骤 1.打开Word文字处理系统,进入工作界面: 2.选择插入 ...

  • vb 如何改变文本框光标形状

    在vb中,如何想要改变文本框光标形状,那么我们只要简单的设计属性即可. 操作方法 01 在空白窗体中绘制一个文本框.可以点选工具栏的文本框,然后按住左键在窗体上拖曳,也可以直接双击文本框中的文本框控件 ...

  • 设置电脑 保护视力 还有系统桌面默认颜色

    设置电脑 保护视力 还有桌面默认颜色 有一条养眼的做法：把白皑皑的窗口变成淡淡的苹果绿。 方法是： 桌面---右键---属性---外观---高级--- ITEM --- 从下拉菜单中选择 窗口(记住选 ...

  • Excel2007教程:改变工作表标签的颜色

    Excel2007基础教程：改变工作表标签的颜色 Excel 允许改变工作表标签的颜色。例如，您可能喜欢用颜色对工作表标签编码，从而更容易地标识工作表的内容。 要改变工作表标签的颜色，右击工作表标签， ...

  • Win8如何恢复系统默认颜色以便解决现实错误问题

    有网友更改了Win8的系统颜色，由于出现误操作最终导致系统显示出错。要解决这个问题，我们可以将Win8恢复到系统默认颜色，下面是具体操作方法。 操作步骤 温馨提示 ：恢复Win8系统默认颜色设置，首先 ...