::selection伪元素改变文本选中颜色

在看张鑫旭大神的文章,刚刚发现了这个,感觉应该后面有用,先存起来。

效果如下:

代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p::selection {
                background: #d3d3d3;
                color: #fff;
            }
            p::-moz-selection {
                background: #d3d3d3;
                color: #fff;
            }
            p::-webkit-selection {
                background: #d3d3d3;
                color: #fff;
            }
        </style>
    </head>

    <body>
        <p>故事的小黄花,从出生那年就飘着。童年的荡秋千,随记忆一直晃到现在。</p>
    </body>

</html>
时间: 2024-10-11 12:59:25

::selection伪元素改变文本选中颜色的相关文章

使用CSS3改变文本选中的默认颜色——张鑫旭

关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3.6浏览器: 在CSS3的爸爸妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜色,就跟让太监生孩子一样困难.但是,随着CSS3呱呱落地,获得越来越多的浏览器认可,一切又显得那么自然而然.虽然有些顽固的糟老头(如IE浏览器)还不认可这个新生的CSS3,但是,丝毫不影响其在其他浏览器上对

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

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

CSS3:高亮文本选中颜色

关键字:  ::selection 为了个性化网站主题,可以对文本高亮背景颜色进行设置. :selection { background: #ffb7b7; /* WebKit/Blink Browsers */ } ::-moz-selection { background: #ffb7b7; /* Gecko Browsers */ } 一个简单的例子: <!DOCTYPE html> <html> <head> <meta charset="UTF

伪元素改变date类型input框的默认样式实例页面

CSS代码: ::-webkit-datetime-edit { padding: 1px; background: url(/study/image/selection.gif); } ::-webkit-datetime-edit-fields-wrapper { background-color: #eee; } ::-webkit-datetime-edit-text { color: #4D90FE; padding: 0 .3em; } ::-webkit-datetime-edit

如何改变网页选中文本的颜色

一.文本选中的默认颜色 今天看了国外的很多网站,发现在网页中选中文本的时候,颜色不是我们平常所说的蓝色.经过google的帮助,发现,原来是 CSS 3.0的一个小特性. 除了主流浏览器(ie)之外,一般还是支持的. 這是浏览器默认选中的颜色 二.使用CSS3改变文本选中的默认颜色 <!DOCTYPE html> <html>     <head>         <style>             .demo1::selection{color:#ff

CSS改变默认文本选中的颜色的方法

请选择本页面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htm 一般情况下在网页里的文本我们用鼠标选中的时候都是蓝色的,这个默认颜色也是可以更改的,本文我们学习如何使用CSS3实现改变默认文本选中的颜色.以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色. 一.关于浏览器文字选中颜色:在CSS3的爸爸 妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜

CSS伪类与伪元素漫谈

我们都知道,在CSS中有很多选择器,例如id(#), class(.),属性[attr],这些虽然可以满足一些需要,但有时候还力有未逮.伪类和伪元素就提供了一个有益的补充,可以使我们更高效编码.伪类和伪元素是预定义的.独立于文档元素的,它们不是从DOM中获取的,不是基于元素本身特征的(id,类,属性等).它们从元素的特殊状态来获取,比如元素的兄弟元素,子元素,文本元素的第一个字符等. CSS伪类: 和一般的DOM中的元素样式不一样,它并不需要任何DOM内容.只是插入了一些修饰类的元素,这些元素对

【CSS进阶】伪元素的妙用--单标签之美

最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值得一看).采用单标签完成各种图案,许多图案与本文有关. 也希望觉得不错的同学顺手在我的 Github 点个 star : CSS3奇思妙想 . 正文从这里开始,本文主要讲述一下 伪元素 before 和 after 各种妙用.    :before和::before的区别 在介绍具体用法之前,简单介绍下伪类和

大放异彩的伪元素——可以做什么?(转)别人分享的文章,发现很不错,果断收藏了

伪元素:before 和 :after可以做的东西是相当惊人的.对于页面上的每一个元素,你拥有了两个更灵活的.而且可以完成其它HTML元素都能完成的东西的元素.它们让一大堆有趣的设计成为可能,而且不会对你的语义标签产生负面影响.这里有一大堆关于这些有趣的效果的示例,你想看的话就接着往下看吧. 多重背景画布 因为你可以将伪元素相对于它们的父类元素绝对定位,你可以想象成每个元素都有两个额外的层.Nicolas Gallagher向我们展示了它的很多种应用,包括多边界.模拟CSS3多重背景.等高栏等.