CSS3:高亮文本选中颜色

关键字:  ::selection

为了个性化网站主题,可以对文本高亮背景颜色进行设置。

:selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

一个简单的例子:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<style>
		#p2::selection {
			background: yellow;
		}
		#p3::selection {
			background: blue;
		}
	</style>
	</head>
	<body>

		<p id="p1">This paragragh doesn't use ::selection</p>

		<p id="p2">This paragragh uses ::selection,highlight color is yellow.</p>

		<p id="p3">This paragragh uses ::selection,highlight color is blue.</p>

	</body>
</html>

未选中时:

选中时:

第一个段落选中的高亮颜色是浏览器的默认颜色。该CSS3属性在主流浏览器(FF,Chrome)等运行正常。

可在jsfiddle在线编辑里尝试一下:

http://jsfiddle.net/xm7h3oxs/

参考博客:http://css-tricks.com/overriding-the-default-text-selection-color-with-css/

时间: 2024-08-06 22:48:06

CSS3:高亮文本选中颜色的相关文章

使用CSS3改变文本选中的默认颜色——张鑫旭

关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3.6浏览器: 在CSS3的爸爸妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜色,就跟让太监生孩子一样困难.但是,随着CSS3呱呱落地,获得越来越多的浏览器认可,一切又显得那么自然而然.虽然有些顽固的糟老头(如IE浏览器)还不认可这个新生的CSS3,但是,丝毫不影响其在其他浏览器上对

::selection伪元素改变文本选中颜色

在看张鑫旭大神的文章,刚刚发现了这个,感觉应该后面有用,先存起来. 效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p::selection { background: #d3d3d3; color: #fff; } p::

如何改变网页选中文本的颜色

一.文本选中的默认颜色 今天看了国外的很多网站,发现在网页中选中文本的时候,颜色不是我们平常所说的蓝色.经过google的帮助,发现,原来是 CSS 3.0的一个小特性. 除了主流浏览器(ie)之外,一般还是支持的. 這是浏览器默认选中的颜色 二.使用CSS3改变文本选中的默认颜色 <!DOCTYPE html> <html>     <head>         <style>             .demo1::selection{color:#ff

CSS改变默认文本选中的颜色的方法

请选择本页面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htm 一般情况下在网页里的文本我们用鼠标选中的时候都是蓝色的,这个默认颜色也是可以更改的,本文我们学习如何使用CSS3实现改变默认文本选中的颜色.以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色. 一.关于浏览器文字选中颜色:在CSS3的爸爸 妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜

CSS如何设置选中文本的颜色

CSS如何设置选中文本的颜色:在默认状态选中的文本颜色和背景颜色并不美观,如果能够给句网站整体的配色来设置被选中文本和背景颜色那么将会极大的提高美观度,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwh

CSS3新增文本属性详述

CSS文本属性复习 1.white-space:对象内空格的处理方式 2.direction:文本流的方向 3.unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示.与direction属性一起使用 1.white-space:对象内空格的处理方式 nowrap 控制文本不换行 pre 空白会被浏览器保留 normal 默认状态 pre-line 合并空白 保留换行符 pre-wrap 保留空白 正常换行 nowrap经常配合text-overflow一起使用,使得超出部分显示

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

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

CSS3新增文本属性

CSS2中常用的属性: text-indent:首行缩进: vertical-align:垂直对齐方式: white-space:空格处理方式: line-height:设置行高: CSS3新增文本属性: text-overflow: clip:溢出的部分裁切掉: ellipsis:显示省略标记(...)  //该属性需要和over-flow:hidden属性(超出处理)还有white-space:nowrap(禁止换行)配合使用,否则无法看到效果. text-align: 原有属性:left

CSS3的文本特性

CSS3 文本 在Web页面或者Web应用程序中设置文本样式是CSS最基本的要求, 早期的CSS文本功能就是给Web页面设置文本的字体.字号.颜色.样式.粗细.间距等. 随着CSS3的出现,文本功能不仅仅局限于这些基本的运用,它给文本功能添加了一些高级的属性设置, 如文本阴影属性text-shadow.文本自动换行属性word- break. 长单词与URL地址自动换行属性word-wrap和文本溢出属性text-overflow等,在 CSS文本功能上主要分为三大类: 字体. 颜色和文本,te