改变选择文字的color及background-color

::selection { color: #fff; background: rgb(221,88,98) }
::-moz-selection { color: #fff; background: rgb(221,88,98) }
::-webkit-selection { color: #fff; background: rgb(221,88,98) }

在一些特殊的网站中,常常会有着一些新奇的体验,在阅读网页的时候相信许多人都会和我一样有着一个习惯,把一些文字选中然后进行阅读,或者时要复制粘贴的时候选择文字对吧。然而无论是在ie,chrome,firefox,safari或者是以这些为内核的浏览器默认的选择文字都是蓝底白字吧.

例如这样

然而也会有一些网站会是这样的

或者是这样的

以下是一个我写的代码。ps:【效果在浏览我blog也可以查看哦!】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>change font-style(改变文字效果)</title>
		<style>
			::selection{
				color: #fff;
			    background: rgb(221,88,98);
			}
			::-moz-selection{
				color: #fff;
				/*颜色的话其实也可以调整,不过我绝对默认的白色就不错了,你要改成#000或者其他也可以*/
			    background: rgb(221,88,98);
			}
			::-webkit-selection{
				color: #fff;
			   background: rgb(221,88,98);
			}
		</style>
	</head>
	<body>
		<h3>改动选择文字效果</h3>
		<p> 那个人坐在海的漩涡中,看着波上波下的光影,敏锐而灵动的听觉,感受着天地间无穷无尽的汹涌。为什么你的翅膀是白色的,眼睛却涂上了深蓝色的颜料?在乐曲的层层递进中,温柔缥缈的女声与吉他的迷幻揪心融合在一起。在朦胧的意象中,一只蜗牛在雪地里温柔地暴走,这也是一种荒凉的自由---这是我随便复制的哈,你们喜欢可以留着</p>
	</body>
</html>

时间: 2024-08-26 14:53:59

改变选择文字的color及background-color的相关文章

[原创作品]html css改变浏览器选择文字的背景和颜色

又很久没有'剥壳'了,最近在为一家公司做一个生产管理解决方案.所以都很忙.今天的话题很简单,就做一个很简单的网页特效.今天偶然浏览到一个网站,他们在选择文字时,样子不是蓝背景和白色字体那么单调,感觉这样很好.至少,显得和别人的不一样. 其实他用的就是css3的一个伪对象选择符,::selection.这个就可以改变选择文字的样式了.献上demo.这其实没多少技术含量,只是将点点滴滴和大家一起分享. <!DOCTYPE html> <html> <head> <ti

改变页面选择文字颜色和背景颜色----selection伪元素

div::selection{color:#fff;background: #E83E84;text-shadow:none}

android textview改变部分文字的颜色和string.xml中文字的替换(转)

转   :http://blog.csdn.net/ljz2009y/article/details/23878669 一:TextView组件改变部分文字的颜色: Java代码   TextView textView = (TextView)findViewById(R.id.textview); //方法一: textView.setText(Html.fromHtml("<font color=\"#ff0000\">红色</font>其它颜色&

鼠标选择文字事件js代码,增加层问题

在页面中增加一个js代码,当用户用鼠标选择文字(鼠标拖动涂蓝文字)时,会出现一个层,提示与这个选择文字有个的信息<script type="text/javascript">document.onmouseup = document.ondbclick= function(){ var txt; if(document.selection){  txt = document.selection.createRange().text }else{  txt = window.

CSS实现的鼠标滑过改变链接文字实例代码

CSS实现的鼠标滑过改变链接文字实例代码: 鼠标滑过的时候,有时候需要改变链接中的文本,这个如果使用js就比较好实现,当然使用CSS也并不难,下面就是一段这样的代码实例,下面就做一下介绍,希望对需要的朋友带来一定的帮助. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http

css和js禁止网页选择文字

user-select有两个值: none:用户不能选择文本 text:用户可以选择文本 需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整 <style> body{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*

页面禁止长按选择文字

//长按禁止选择文字* { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } 如果是想禁用长按弹出菜单, 用 js node.addEventListener('contextmenu', function(e){ e.preventDefault(); });

Ubuntu 14.04 LTS 火狐浏览器中,鼠标选择文字被删除的解决办法

这篇文章主要介绍了Ubuntu 火狐浏览器中,鼠标选择文字被删除的解决办法,需要的朋友可以参考下在终端中输入命令: ibus-setup将 "在应用程序窗口中启用内嵌编辑模式" 选项取消 原文地址:https://www.cnblogs.com/onelikeone/p/9071460.html

WPF Tips: Specify background color of the selected item in listbox

当没有focus在listbox时,selectedItem的background为灰色,只有鼠标点击之后才会变成蓝色.希望即使鼠标没有点击的时候也是蓝色. 解决方法: 在xaml中添加: <ListBox.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"/> <SolidColorBrush x:Key=&