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

　　其实他用的就是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. [RxJS] Observables can complete

    The Observer object has the functions next() and error(). In this lesson we will see the other (and ...

  2. EJB开发第一个无状态会话bean、开发EJBclient

    开发第一个无状态会话bean EJB中的三中bean: 会话Bean(Session Bean) 负责与client交互,是编写业务逻辑的地方.在会话bean中能够通过JDBC直接操作数据库.但大多数 ...

  3. 使用VisualVM查看Java Heap Dump

    浏览Heap Dump 可以使用VisualVM浏览heap dump文件的内容,从而快速查看在堆中分配的对象.Heap dumps在主窗口的heap dump子标签页中显示.你可以打开保存在本地的h ...

  4. JS高级程序设计学习笔记之第三章基本概念（语法，数据类型，流控制语句，函数）——查漏补缺

    一.语法: 区分大小写; 2.标识符:就是指变量.函数.属性的名字,或者函数的参数 a.标志符的规则:①第一个字符必须是一个字母.下划线(_)或一个美元符号($).                   ...

  5. svn服务器的配置步骤

    1.安装客户端: TortoiseSVN-1.9.3.27038-x64-svn-1.9.3.msi下载地址:http://jaist.dl.sourceforge.net/project/torto ...

  6. Dom对象和jQuery包装集

    Dom对象 在传统的JavaScript开发中,我们经常都是首先获取Dom对象,比如: document.getElementById("dv1"); 我们经常使用getEleme ...

  7. java 后台线层也叫守护线层

    import java.util.concurrent.locks.*; class Do9 { public static void main(String[] args) { Ds d=new D ...

  8. （五）JS学习笔记 - Sizzle选择器

    Sizzle词法解析 sizzle对于分组过滤处理都用正则,其中都有一个特点,就是都是元字符^开头,限制匹配的初始,所以tokenize也是从左边开始一层一层的剥离. •可能会应用到正则如下: // ...

  9. Http服务器性能测试工具ab..

    -A auth-username:password 对服务器提供BASIC认证信任.用户名和密码由一个:隔开,并以base64编码形式发送,无论服务器是否需要(即,是否发送了401认证需求代码),此字 ...

  10. jquery easyui+layer后台框架

    最近使用jquery easyui搭建了一个后台框架,以方便以后使用 上图先: 下载地址:CSDN下载