又很久没有'剥壳'了，最近在为一家公司做一个生产管理解决方案。所以都很忙。今天的话题很简单，就做一个很简单的网页特效。今天偶然浏览到一个网站，他们在选择文字时，样子不是蓝背景和白色字体那么单调，感觉这样很好。至少，显得和别人的不一样。

　　其实他用的就是css3的一个伪对象选择符，::selection。这个就可以改变选择文字的样式了。献上demo。这其实没多少技术含量，只是将点点滴滴和大家一起分享。

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

</head>

<style>

    /* webkit, opera, IE9 */

    div::selection {

        background: red;

        color: #fff;

    }

    /* mozilla firefox */

    div::-moz-selection {

        background: red;

        color: #fff;

    }

    /* webkit, opera, IE9 */

    div::selection {

        background: pink;

        color: #fff;

    }

    /* mozilla firefox */

    div::-moz-selection {

        background: red;

        color: #fff;

    }

</style>

<body>

<div>

  hi, Every body, I am Steven. Nice to meet you.<br>

    Welcome to my blog!

</div>

</body>

</html>

大家试一试吧！转载请注明出处：http://zhutty.cnblogs.com

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

  1. 用css改变鼠标选中文字的样式

    打开一个页面,选中一段文字,会出现系统默认的蓝色背景和白色文字,如下图: 那么 这种选中效果我们怎么去自定制呢,比如我想让文字选中的时候背景是绿色,文字是白色 我们在css文件中插入如下代码: ::- ...

  2. CSS改变浏览器默认滚动条样式

    前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式   比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决   注:经测试,目 ...

  3. 【css2、css3】css改变select选择框的样式

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

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

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

  5. css 改变浏览器滚动条的样式

    /*滚动条样式*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .i ...

  6. CSS——改变浏览器滚动条样式

    https://www.cnblogs.com/sun-rain/p/5789417.html

  7. WinForm开发中针对TreeView控件改变当前选择节点的字体与颜色

    本文转载:http://www.cnblogs.com/umplatform/archive/2012/08/29/2660240.html 在B/S开发中,对TreeView控件要改变当前选中节点的 ...

  8. 改变UILable里面文字的大小和颜色

    UILabel *lb = [[UILabel alloc]init]; NSMutableAttributedString *attriStr = [[NSMutableAttributedStri ...

  9. 不同CSS布局实现与文字鼠标选择的可用性——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2401 一.文字选择的 ...

随机推荐

  1. iOS 捕获系统外异常

    iOS 捕获系统外异常 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太 ...

  2. mysql求时间差

    SELECT TIMESTAMPDIFF(SECOND, now(), "2012-11-11 00:00:00") 语法为:TIMESTAMPDIFF(unit,datetime ...

  3. <a>标签中href="javascript:;"

    javascript: 是一个伪协议,其他的伪协议还有 mail:  tel:  file:  等等. 1 <a id="jsPswEdit" class="set ...

  4. （转）asp.net注册实现下一步

    在asp.net中有两种容器控件,其中包括panel和placeholder控件. 使用panel控件可以对控件进行分组.一帮助组织web窗体也的内容,将控件组织在面板中,可提供有关在运行时控件应如何 ...

  5. Unity5.3——UI之Canvas

    原文:http://docs.unity3d.com/Manual/UISystem.html Canvas 所有的UI都应该放在Canvas里面(子层).Canvas是一个带有Canvas组件的Ga ...

  6. [转载]C++ 堆与栈简单的介绍

    在C和C++中,有三种使用存储区的基本方式: [静态存储区(Static   Memory)] 在静态存储区中,连接器(linker)根据程序的需求为对象分配空间.全局变量.静态类成员以及函数中的静态 ...

  7. Codeforces Round #318(Div 1) 573A, 573B,573C

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud 这场的前两题完全是手速题...A题写了7分钟,交的时候已经500+了,好在B题出的 ...

  8. Python新手学习基础之初识python——与众不同1

    Python是什么? 首先我们先简单介绍下python这门语言,Python是一种解释性的脚本语言,它不需要像C/C++那样先编译再执行,也不像JS那样可以在浏览器上直接执行.它为我们提供的基础代码库 ...

  9. 命令提示符CMD远程连接Mysql学习笔记

    我想要用Cmd可以像SecureCRT一样远程连接数据库,查询数据,因为用cmd的话可以用批处理,方便脚本调用 第一步:直接使用命令 mysql –h ip –u user –p,本地运行了该命令提示 ...

  10. storyboard和xib的区别

    storyboard只是算是帮你布局,流程什么的,xib的另一种形势,比xib功能多,但是和分享完全没有半点关系 你暂时可以理解为高级xib