CSS3实现改变默认文本选中的颜色

这个默认颜色也是可以更改的,本文我们学习如何使用CSS3实现改变默认文本选中的颜色?
关于浏览器文字选中颜色
以我的系统举例(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-10-25 18:09:54

CSS3实现改变默认文本选中的颜色的相关文章

CSS3改变文本选中的默认颜色代码

目前Firefox.Safari.Chrome以及Opera浏览器都支持文本选择属性,如果浏览器不支持该属性,会直接忽略它,所以不会产生任何不良的影响. 下面就简单展示下这个改进UI体验的小技巧. 二.改变默认选中颜色 首先,简单点的例子,我们可以设置整个页面文本选中的基本样式,如下:  代码如下 复制代码 ::selection { background:#d3d3d3; color:#555; } ::-moz-selection { background:#d3d3d3; color:#5

DropDownList如何改变默认选中项的两种方式

引言 其实是不想总结这方面的内容,发现太简单了,可是在这上面也栽了跟头.所以还是记录一下吧,算是提醒自己,不要太看不起太基础的东西,有这种心理,是会载大跟头的. 一个例子 这里模拟一下最常用的一个例子,在列表中,选择修改,将选中的记录,在上面显示,并改变DropDownList中的默认选中项. 方式一 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.

spinner-如何改变下拉列表中字体的颜色

问题描述 如何改变下拉列表中字体的颜色 关于Droid X的手机,用户反应说,在下拉列表中字体颜色变成白色,所以字体看不见,除非用户突出显示这一项.其他的手机没有出现这个问题.我要把字体强制的变成黑色来看看能否解决问题.我该怎么做呢? 这是我目前填充下拉列表的方法.看似simple_spinner_item在Droid X's中出错了. String spin_arry[] = new String[str_vec.size()]; str_vec.copyInto(spin_arry); Ar

Easyui Treegrid改变默认图标的方法_jquery

普通情况下,treegrid的图标是默认的文件夹与文件的形式,如下图: ​​​我们可以在json文本中加入iconCls来改变默认图标,例如样例中: ​{"total":7,"rows":[ {"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","

javascript自动恢复文本框点击清除后的默认文本_javascript技巧

本文实例介绍了点击文本框清除默认文本离开再恢复的js实例代码,分享给大家供大家参考,具体内容如下 相关知识: 1.onclick事件的定义和用法: 当点击对象的时候会触发此事件. 浏览器支持: 1).IE浏览器支持此事件. 2).火狐浏览器支持此事件. 3).Opera浏览器支持此事件. 4).谷歌浏览器支持此事件. 5).safria浏览器支持此事件. 实例代码: <html> <head> <meta charset="gb2312"/> <

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

Excel2007基础教程:改变工作表标签的颜色 Excel 允许改变工作表标签的颜色.例如,您可能喜欢用颜色对工作表标签编码,从而更容易地标识工作表的内容. 要改变工作表标签的颜色,右击工作表标签,并选择"工作表标签颜色"选项,然后从颜色选择器框中选择颜色.

Jquery 改变radio/checkbox选中状态,获取选中的值

 这篇文章主要介绍了Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码) 需要的朋友可以过来参考下,希望对大家有所帮助 //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_category").each(function() {  if ($(this).attr('checked')){                         $(this).attr('checked' ,false);                

用js代码改变单选框选中状态的简单实例

 这篇文章主要介绍了js代码改变单选框选中状态的简单实例,有需要的朋友可以参考一下 今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 代码如下: function doGender(gender) { if (gender == "男") { gel("radionan").style.checked = "checked"; } else { gel("radionv").style.checke

Eclipse中改变默认的workspace的方法及说明详解_java

eclipse中改变默然的workspace的方法可以有以下几种: 1.在创建project的时候,手动选择使用新的workspace,如创建一个web project,在向导中的Location选项,取消使用"Use default location",同时在下面选择新的workspace. 2.在file菜单中选择switch workspace项,即可选择一个新的workspace 3.在eclipse安装目录下configuration/.settings目录下的 org.ec