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

CSS如何设置选中文本的颜色:
在默认状态选中的文本颜色和背景颜色并不美观,如果能够给句网站整体的配色来设置被选中文本和背景颜色那么将会极大的提高美观度,下面就通过代码实例介绍一下如何实现此效果。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
::selection{
  background-color:#84ca7f;
  color:#000;
}
::-webkit-selection{
  background-color:#84ca7f;
  color:#000;
}
::-moz-selection{
  background-color:#84ca7f;
  color:#000;
}
</style>
</head>
<body>
<div>蚂蚁部落欢迎您,只有奋斗才会有美好的明天</div>
</body>
</html>

以上代码当选中文本的时候,能够改变背景色和文本颜色,但是::selection选择符具有浏览器兼容性问题,这里就不多介绍了,具体可以参阅CSS的伪对象选择符::selection一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9631

更多内容可以参阅:http://www.softwhy.com/divcss/

时间: 2024-08-01 06:26:57

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

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

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

如何改变在浏览器上选中字体的颜色

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>CSS如何设置选中文本的颜色</title><style type="text/css">::selecti

CSS 文本字体颜色(CSS color)

CSS 颜色样式篇 目录 (音乐放松椅) 认识CSS 颜色(color) 网页颜色基础 两种方法设置对象颜色样式 文字颜色控制color 网页背景颜色color 边框颜色color 网页color RGB设置 网页color 颜色表 css 颜色样式color总结 一.认识CSS 颜色(CSS color) - TOP(音乐放松椅) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范.1.常用颜色地方包含:字体颜色.超链接颜色.网页背景颜色.边框颜色2.颜色规范与颜色规定:网页使用RGB模式

UISegmentedControl 改变选中字体的颜色

//设置选中的字体颜色为蓝色    [segmentControll setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor blueColor]} forState:UIControlStateSelected];        //设置未选中的字体颜色为白色    [segmentControll setTitleTextAttributes:@{NSForegroundColorAttributeName : [UI

超链接字体颜色设置(通过html/css的设置方法)

超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标时的颜色 四中超链接状态分别对应的css属性:a{}.a:hover{} .a:visited{}.a:active{},通常只写a{}.a:hover{}即可,如果你需要其他两种字体颜色设置请参照一下顺序来书写 a{color:red;} a:visited{color:green;} a:hov

css设置input文本框样式代码实例

css设置input文本框样式代码实例:使用css设置input元素的样式是最为常用的操作之一,当然也是最为基础的操作,可能对于刚刚接触css的朋友还不够熟悉,下面就通过一段简单的代码历史演示一下如何设置文本框的样式,当然这个演示可能并不是特别的美观,这里的目的也只是起到一个演示作用,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="

我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体

一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置. 1,  新建一个网页a.html,把下面的代码复制进去. <html> <head> <style type="text/css"> body { font-family : 微软雅黑,宋体; font-size : 1

css 修改选中文字的颜色

突然想试着修改一下博客里面文本选中时的颜色,然后就找到了相应的css代码如下: body::selection { color:#FFFFFF; background-color:#E84893; text-shadow:none; } body::-moz-selection { color:#FFFFFF; background-color:#E84893; text-shadow:none; } 效果如下图所示: 1.浏览器默认样式 2.使用上面样式之后

如何设置部分文本的背景颜色

<html> <head> <style type="text/css"> span.highlight { background-color:yellow } </style> </head> <body> <p> <span class="highlight">这是文本.</span> 这是文本. 这是文本. 这是文本. 这是文本. 这是文本. 这是文本.