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

　　其实他用的就是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. 50个Android开发技巧(10 为TextView加入样式)

    首先来看一个控件的例子: (原文地址:http://blog.csdn.net/vector_yi/article/details/24428085) 手机上类似这种场景你一定已经见过非常多次了,但有 ...

  2. asp.net 获取系统的根目录

    测试有效的 :  系统的根目录 HttpContext.Current.Server.MapPath(HttpContext.Current.Request.ApplicationPath).ToLo ...

  3. Weka算法Clusterers-DBSCAN源代码分析

    假设说世界上仅仅能存在一种基于密度的聚类算法的话.那么它必须是DBSCAN(Density-based spatial clustering of applications with noise).D ...

  4. Oracle 11g新特性invisible index(不可见的索引)

    假设一张表上有十几个索引,你有什么感受?显然会拖慢增.删.改的速度.不要指望开发者能建好索引.我的处理方法是先监控非常长的一段时间.看哪些索引没实用到,然后删除. 但删除以后,假设发现某一天实用,那又 ...

  5. Netmon: A light-weight network monitor for Windows

    Netmon is a light-weight network monitor that works on Windows operating systems. It provides differ ...

  6. 广播接收者 BroadcastReceiver 示例-1

    广播机制概述 Android广播分为两个方面:广播发送者和广播接收者,通常情况下,BroadcastReceiver指的就是广播接收者.广播作为Android组件间的通信方式,可以使用的场景如下: 1 ...

  7. 如何获取外网Ip呢， 终于找到方法了

    临时更换网址:http://20140507.ip138.com/ic.asp 这个网址能同时获取ip和城市名字 上面的网址如何来的呢,其实很简单,随便打开一个获取Ip的网站,比如http://www ...

  8. MS SQL到Oracle的数据迁移笔记

    MS SQL到Oracle的数据迁移笔记 一.任务背景 旧系统使用MS SQL Server数据库,新系统使用Oracle数据库,现在需要将旧系统中的数据迁移到新系统中,旧数据按照约定的规则转换后,能 ...

  9. xcode下载方式

    1.去AppStore下载 对于Xcode老是在AppStore升级失败,而且下载慢,可取找到了这个--> 官方 Xcode .dmg 文件下载链接:超级传送门 2.开发者中心官网下载 可参考这 ...

  10. debian系（Ubuntu）安装jenkins（持续集成）

    wget -q -O - http://pkg.jenkins-ci.org/debian/jenkins-ci.org.key | sudo apt-key add - sudo sh -c 'ec ...