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

　　其实他用的就是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. 使用zTree控件制作的表格形式的树形+数据菜单

    測试了一下,兼容ie7以上, chrome opera ff 不使用对方css /*------------------------------------- zTree Style version: ...

  2. Zend Studio使用

    也许你能够用Dreamweaver.Notepad++或者Editplus这种东西完毕你的系统,但所谓“工欲善其事,必先利其器”,偶觉得 一个给力的IDE对于新手还是非常必要的,而Zend作为PHPe ...

  3. inode-软链接与硬链接

    一.inode是什么?理解inode,要从文件储存说起.文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5KB).操作系统读取硬 ...

  4. canvas--画宇宙

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  5. Combo( 自定义下拉框) 组件

    本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于ValidateBox(验证框)组件 一． 加载方式自定义下拉框不能通过标签的方式进行创建.<input ...

  6. （三）《Java编程思想》——构造函数初始化

    1.初始化顺序是由变量在类内的定义顺序决定的,并且先初始化变量,然后才调用构造函数. package chapter4; //: OrderOfInitialization.java /** * 初始 ...

  7. 一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  8. HTML、CSS、JS、PHP 的学习顺序~（零基础初学者）

    如果你有耐心坚持一年以上的话, 我会推荐HTML->CSS->JS->PHP的顺序来学习. 1. HTML学习:首先学习HTML,HTML作为标记语言是非常容易学的,把w3schoo ...

  9. Android系统中长按事件的实现机制解析

    在Android的触摸消息中,已经实现了三种监测,它们分别是 1)pre-pressed:对应的语义是用户轻触(tap)了屏幕 2)pressed:对应的语义是用户点击(press)了屏幕 3)lon ...

  10. oracle 优化——索引与组合索引

    1.索引结构.第一张图是索引的官方图解,右侧是存储方式的图解. 图中很清晰的展示了索引存储的状况. 在leaf 节点中存储了一列,索引所对应项的 :值,rowId,长度,头信息(控制信息) 这样我们就 ...