关于浏览器文字选中颜色

核心提示:浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色

以我的系统举例(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 class="maroon">...文字内容。</p>

会得到类似下图的效果:

同样的,你可以根据自己的需要,指定CSS选择器以及对应内容文字/图片等的选中样式,这里就不一一举例了。

三、结语

老实讲,在实际的商业项目中,我是绝不会使用:selection来改变文本选中的样式的,要是个人网站或是设计类网站倒是很有可能使用此属性来让网站蓬荜生辉。当然,每个人在页面重构的过程中所注重的地方时不一样的,所以,对:selection的态度仅代表个人观点。

时间: 2024-08-22 14:17:47

关于浏览器文字选中颜色的相关文章

Android中EditText和AutoCompleteTextView设置文字选中颜色方法_Android

EditText和AutoCompleteTextView设置文字选中颜色 大多数Android Rom上,文本选择的背景色都是很好看的鲜绿色, 但是在某些垃圾的三星手机上,居然是蓝色,令人恶心反感,其实完全可以通过程序来修改,文本的默认选中背景色. 所用API解释 复制代码 代码如下: android:textColorHighlight Color of the text selection highlight. EditText设置效果 AutoCompleteTextView 设置效果

给表格中的文字添加颜色动画教程

Excel2003是一款经典的办公软件,专业的制表软件,其中包括表格制作.公式运算.函数使用.图表制作等强大功能.Excel是办公族必不可少的软件之一.下面为大家分享<Excel2003入门动画教程2.给表格中的文字添加颜色>. 演示动画 操作步骤 设置字体:选中Excel表格中需要设置字体的单元格(区域),鼠标按"格式"工具栏的"字体"框右侧的下拉按钮,在随后弹出的下拉列表中,选择需要的字体即可. 设置字号:选中表格里需要设置字号的单元格(区域),鼠标

PPT2010中如何更改链接文字的颜色?

  细心的用户在制作PPT的时候会发现,当将文字部分做了超链接的时候,文字的颜色会发生改变,不是蓝色就是紫色,甚至有的PPT里面两种颜色都有,这样看起来很是杂乱无章,如何将PPT链接颜色更改为统一的颜色,并且还是自己喜欢的呢?这个就要靠自己去设置了,具体的我们就一起来了解了解吧. 操作步骤 1.首先打开一篇具有文字链接的PPT,会发现其颜色为蓝色,如下所示; 2.接下来我们开始更改链接部分的颜色,首先选中做了链接的文字,单击"设计"选项卡,在"主题"区域单击&quo

UITableView取消选中颜色、常用操作

使用空白view取代cell - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { //取消选中颜色 UIView *backView = [[UIView alloc] initWithFrame:cell.frame]; cell.selectedBackgroundView = backView; cell.selectedBackgr

CSS网页制作技巧:兼容主流浏览器的背景颜色透明

文章简介:CSS网页制作技巧:兼容主流浏览器的背景颜色透明. 以前都是用jquery来写背景透明,方法简单,但是有缺点,脚本没加载完时,背景颜色是不透明的.如果换成在css里写好的话,效果就很好了..transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是: opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持f

HTML教程-文字的颜色

教程 文字颜色设置格式如下: <font color=color_value>-</font> 这里的颜色值可以是一个十六进制数(用"#"作为前缀),也可以是以下16种颜色名称. ● Black = "#000000" ● Green = "#008000" ● Silver = "#C0C0C0" ● Lime = "#00FF00" ● Gray = "#80808

UC浏览器文字重叠怎么办

UC浏览器文字重叠怎么办   UC浏览器 1.可能是当前应用出现错误,建议卸载后重装UC浏览器. 2.可能是应用版本过于陈旧,请升级UC浏览器至最新版本. 3.可能是网络问题,这个与手机网络通讯速度有关,尝试到网速快信号强的地方浏览. 4.可能是所浏览的网页本身界面出现问题,没能很好的兼容手机浏览界面,需等待官方调试. 如果你在使用UC浏览器的过程中也出现了文字重叠的情况,可以根据上文来解决,希望以上内容能够对你有所帮助. ps签名教程 ps修图教程 ps实例教程

字体颜色-android java代码中设置radiobutton选中与为选中颜色

问题描述 android java代码中设置radiobutton选中与为选中颜色 tab_rb_b.setTextColor(MainActivity.this.getResources().getColor(R.drawable.main_text_color)); 其中R.drawable.main_text_color是自己写好的 颜色改变的xml <!-- not selected --> 但是设好之后 颜色并没有随选中而改变,只是一直都是为选中状态的颜色. 哪位大神知道是怎么回事吗

Android沉浸式状态栏 如何改变状态图标和文字的颜色

问题描述 Android沉浸式状态栏 如何改变状态图标和文字的颜色 当我把状态栏设置成白色的时候文字和图标都看不到,而QQ却可以.求助~~~ 解决方案 改变状态栏文字的颜色android 沉浸式之改变小米状态栏颜色 解决方案二: 我是来领积分的啦啦啦啦啦啦啦啦啦 解决方案三: 没看懂什么鬼啊!一串英语搞什么