用css改变鼠标选中文字的样式

打开一个页面,选中一段文字,会出现系统默认的蓝色背景和白色文字,如下图:

那么 这种选中效果我们怎么去自定制呢,比如我想让文字选中的时候背景是绿色,文字是白色

我们在css文件中插入如下代码:

::-moz-selection {
  background: #26a69a;
  color: #ffffff;
}
::selection {
  background: #26a69a;
  color: #ffffff;
}

  再看一下效果:

这时候有些同学可能就开始想象了,是不是font-size,font-weight是不是都可以起作用?

我们来试一下:

在css里插入以下代码:

::-moz-selection {
  background: #26a69a;
  color: #ffffff;
  font-weight: 900;
  font-size: 32px;
}
::selection {
  background: #26a69a;
  color: #ffffff;
  font-weight: 900;
  font-size: 32px;
}

  效果:

所期望的字体大小和粗细都没有效果。因为 section的文字效果斤作用于 背景颜色(不包含背景图片) 字体颜色,不作用与 字体大小,字体样式,字体粗细等等

时间: 2024-11-06 13:12:36

用css改变鼠标选中文字的样式的相关文章

CSS3特殊伪类::selection改变页面选中文字的样式

一般在网页上面,选中文字的时候,文字的样式是会改变的,当然,样式也都是千篇一律的浏览器的默认样式,蓝底白字,偶然看到有些网页上面当文字选中的时候会有不一样的样式,当时就很是好奇,后来才慢慢发现是css的一个伪类::selection ::selection是一个CSS3选择器(这也告诉这我们CSS3必须要去熟悉,这玩意确实可以弄出很多意想不到的好效果.) 兼容性:IE9+,Chrome,Opera,Safari,Firefox…(也可以去查看)caniuse.com#search=::selec

改变鼠标选中区域的样式。

::-moz-selection{background:#93C; color:#FCF;} ::selection {background:#93C; color:#FCF;} 兼容到IE8往上 应用实例:淘宝UED http://ued.taobao.org/blog/2010/12/jpg_png/

[原创作品]html css改变浏览器选择文字的背景和颜色

又很久没有'剥壳'了,最近在为一家公司做一个生产管理解决方案.所以都很忙.今天的话题很简单,就做一个很简单的网页特效.今天偶然浏览到一个网站,他们在选择文字时,样子不是蓝背景和白色字体那么单调,感觉这样很好.至少,显得和别人的不一样. 其实他用的就是css3的一个伪对象选择符,::selection.这个就可以改变选择文字的样式了.献上demo.这其实没多少技术含量,只是将点点滴滴和大家一起分享. <!DOCTYPE html> <html> <head> <ti

【css2、css3】css改变select选择框的样式

效果: 代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 <style type="text/css"> 7 /* 去掉默认样式,设置新的样式 */ 8 .select-style{ 9 position:

css取消双击选中文字

在我们在写前端页面的时候,由于手速过快(当然这都是指的老司机),会经常双击,浏览器就会默认选中你双击的文本,这种感觉有点不太好. 这个时候就用到了 user-select:none; 属性. 因为存在着兼容性的问题,所以在写的时候就需要考虑一下了. div{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10*/ -khtml-user-select:non

鼠标选中文字的兼容

function getSelectedText() { var txt = ""; if (window.getSelection) { txt = window.getSelection(); } else if (window.document.getSelection) { txt = window.document.getSelection(); } else if (window.document.selection) { txt = window.document.sel

JQuery用鼠标选文字来发新浪微博

最近注意到新浪博客有个小功能,就是当鼠标选中一段文字时会浮现一个小图片,点击这个图片可以把选中内容发送到新浪微博,一时兴起昨晚就写了一个Demo玩了一下,代码超简单,没优化,有兴趣的朋友可以自己改进.洛宁县幼儿园 原理很简单,先获得鼠标选中文字,然后调用新浪博客中提供的页面,把文字作为参数传过去就OK了. 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&g

CSS定义鼠标移上图片链接,出现边框效果

<html><head><title>友情链接用的CSS图片链接和文字链接样式</title><style>.f4{width:100%; overflow:hidden; clear:both; margin:0; padding:0;}.f4 li{ width:94px; height:37px; display:block; float:left; overflow:hidden; margin:10px 12px 2px 3px;}.f

开发油猴脚本:给任意网页的选中文字涂色

概述 简单来说:就像在现实课本上用mark笔涂色划重点一样,可以用这个脚本在任意网页上涂色划重点. 开发缘由:每次在网上看资料的时候,都会默默归纳几个重要的地方,但是看完资料写博客的时候又容易忘重点,所以我开发了这款脚本. 脚本缺陷:(1)不能刷新网页,否则标记就没了.(2)只能标记同一种文字,不能超链接,文本,引用,强调一起标记,但是可以分开标记. 演示 脚本代码 首先,需要在浏览器上面安装油猴(Tampermonkey)插件.360浏览器可在扩展中心找到.其它浏览器的安装方法请自行百度. 最