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

　　其实他用的就是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. shell脚本加密

      如何保护自己编写的shell程序要保护自己编写的shell脚本程序,方法有很多,最简单的方法有两种:1.加密 2.设定过期时间,下面以shc工具为例说明: 一.下载安装shc工具shc是一个加密s ...

  2. Unity用户自定义圆角头像

    前天朋友遇到一个这样的需求,而且比较棘手让我帮忙解决.需求就是棋牌类的游戏,玩家的个人资料中包括自己的头像而且可以浏览相册中的图片或者使用相机拍照设置.关于这个问题我也查阅一些资料,由于涉及安卓部分知 ...

  3. Ajax原生XHR对象

    前端学了有一段时间了,在项目中我通常使用的都是jQuery封装好的Ajax函数($.ajax.$.get.$.post),使用非常的简单方便,但为了更清楚的了解Ajax,需要学习原生xhr对象.   ...

  4. Node.js开发环境介绍-调试工具

    1)WebStorm 断点调试,单步执行 2)nodemon 监听文件变更,自动重启 3)node-inspector 基于浏览器调试nodejs 4)Chrome Developer Tools 基 ...

  5. datagrid数据导出到excel文件给客户端下载的几种方法

    方法一:导出到csv文件,存放在服务器端任一路径,然后给客户下载 优点: 1.可以进行身份认证后给客户下载,如果放到非web目录就没有对应的url,客户无法随时下载. 2.也是因为生成了文件,所以占用 ...

  6. NSURLSessionDataTask

    #import "ViewController.h" @interface ViewController ()<NSURLSessionDelegate,NSURLSessi ...

  7. SignalR小计

    微软官方例子地址:http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-a ...

  8. JavaWeb学习笔记之Servlet（一）

    1. 引子: 当我们开始进入JavaWeb开发的学习时,我们就必须要和Servlet和HTTP这两个词进行打交道了,尤其是Servlet.即使到了后面使用JSP (我们知道JSP其本身就是一个Serv ...

  9. Fedora22没有i18n文件

    今天想修改Fedora22的系统语言,发现/etc/sysconfig/没有i18n 解决方法: dnf install system-config-language.noarch -y system ...

  10. 16--Box2D使用（二、显示物理世界）

    在上一篇文章中我们创建了的一个物理世界,当物理世界中的刚体一个也没有显示出来.为显示物理世界中的物体,我们需要引入GLES-Render(调试Box2D使用).这两个文件可以再 %Cocos_Home ...