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

请选择本页面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htm

一般情况下在网页里的文本我们用鼠标选中的时候都是蓝色的,这个默认颜色也是可以更改的,本文我们学习如何使用CSS3实现改变默认文本选中的颜色。
以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色。

一、关于浏览器文字选中颜色:
在CSS3的爸爸 妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜色,就跟让太监生孩子一样困难。但是,随着CSS3呱呱落地,获得越来越多的浏览器认可,一切又显得那么自然而然。虽然有些顽固的糟老头(如IE浏览器)还不认可这个新生的CSS3,但是丝毫不影响其在其他浏览器上对UI的又一次改进。
目前Firefox、Safari、Chrome以及Opera浏览器都支持文本选择属性,如果浏览器不支持该属性,会直接忽略它,所以不会产生任何不良的影响。下面就简单展示下这个改进UI体验的小技巧。 by 何问起

二、改变默认选中颜色:
首先,简单点的例子,我们可以设置整个页面文本选中的基本样式,如下:

::selection { background:deeppink; color:lightgreen; } ::-moz-selection { background:deeppink; color:lightgreen; } ::-webkit-selection { background:deeppink; color:lightgreen;}

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

三、结语:
本文只是一个技术交流,实际工作中是否使用还得看具体情况,在商业网站中我是绝不会使用:selection来改变文本选中的样式的,要是个人网站或是设计类网站倒是很有可能使用此属性来让网站蓬荜生辉。当然,每个人在页面重构的过程中所注重的地方时不一样的,所以,对:selection的态度仅代表个人观点。

代码:

<style>
::selection { background:deeppink; color:lightgreen; } ::-moz-selection { background:deeppink; color:lightgreen; } ::-webkit-selection { background:deeppink; color:lightgreen;}</style>

示例二:
<style>
::selection { background:deeppink; color:white; } ::-moz-selection { background:deeppink; color:white; } ::-webkit-selection { background:deeppink; color:white;}</style>

转载自:http://hovertree.com/h/bjaf/38hq6y9d.htm 何问起

时间: 2024-10-28 20:55:54

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

CSS改变被鼠标选中的文字颜色及背景

页面中的文字被鼠标选中的文字颜色及背景怎么设置? ::selection { background:#e96147;  color:red; } ::-moz-selection { background:#e96147;  color:red; } ::-webkit-selection { background:#e96147;  color:red; } 希望对大家有帮助

iOS中通过设置CSS改变WebView字体大小,颜色,背景颜色

因为WebView自带的属性是不可以改变字体大小颜色这些需求的,只能通过改变css样式,内置来解决.在百度上搜了半天很多不靠谱,现在给出几种解决方案如下: 1.第一种方式:在WebView的代理方法webViewDidFinishLoad中: 字体大小: [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '12

用css改变默认的checkbox样式

自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html> <html> <head> <meta charset="utf-8"> <title>chec</title> <style> #wrapper {margin: 20px auto;} #wrapper .i

用纯css改变默认的radio和checkbox的样式

利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: input[type="radio"],input[type="checkbox"] { display: none } input[type="radio"]+label::before,input[type="checkbox"]+lab

checkbox 用css改变默认的样式

<!--html--> <label class="bl_input_checkbox click_checkbox" che_data="10"><input type="checkbox" name="" value=""><i></i><span>有作品</span></label> //css .bl_i

css改变input输入框placeholder值颜色

::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff; opacity: 1; } :-ms-input-placeholder { /* Inte

iOS设置UITableViewCell的背景色透明和选中颜色的方法

1.设置UITableViewCell的背景色透明方法: cell.backgroundColor=[UIColor clearColor]; 或者设置颜色透明度为0: cell.backgroundColor = [UIColor colorWithWhite:0.0f alpha:0.0f]; 2.设置UITableViewCell的选中颜色的方法:     UIView *view = [[UIView alloc]init];     view.backgroundColor=[UICo

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

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

CSS3改变页面默认选中背景颜色及设置页面禁止全选或局部选择

改变默认选中的背景颜色 ::-moz-selection{background:#FF0000;color:#FFFFFF;} ::selection {background:#FF0000;color:#FFFFFF;} code::-moz-selection {background:#FF0000;color:#FFFFFF;} code::selection {background:#FF0000;color:#FFFFFF;} 设置页面禁止选中 /*全局*/ html,body{ pa