文本自定义,CSS如何设置选中文本的颜色
分类:高并发

如何实现双击选中文本背景色自定义效果,文本自定义

如何实现双击选中文本背景色自定义效果:
本章节介绍一下如何实现当双击选中一定区域的文本的时候,实现背景色自定义的效果。
下面就通过代码实例做一下简单介绍:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
::selection{
  background-color:#84ca7f;
  color:#000;
}
::-webkit-selection{
  background-color:#84ca7f;
  color:#000;
}
::-moz-selection{
  background-color:#84ca7f;
  color:#000;
}
</style>
</head>
<body>
<div>softwhy.com是蚂蚁部落的网址。</div>
</body>
</html>

上面的代码实现了我们的要求,其实就是通过::selection选择器对选中的文本进行相关的设置,通常都是使用鼠标划选,当然也可以通过双击方式选中,代码非常简单,关于::selection选择器可以参阅CSS3的::Selection属性用法详解一章节。

原文地址是:

更多内容可以参阅:

如何实现双击选中文本背景色自定义效果: 本章节介绍一下如何实现当双击选中一定...

CSS如何设置选中文本的颜色,

CSS如何设置选中文本的颜色:
在默认状态选中的文本颜色和背景颜色并不美观,如果能够给句网站整体的配色来设置被选中文本和背景颜色那么将会极大的提高美观度,下面就通过代码实例介绍一下如何实现此效果。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
::selection{
  background-color:#84ca7f;
  color:#000;
}
::-webkit-selection{
  background-color:#84ca7f;
  color:#000;
}
::-moz-selection{
  background-color:#84ca7f;
  color:#000;
}
</style>
</head>
<body>
<div>蚂蚁部落欢迎您,只有奋斗才会有美好的明天</div>
</body>
</html>

以上代码当选中文本的时候,能够改变背景色和文本颜色,但是::selection选择符具有浏览器兼容性问题,这里就不多介绍了,具体可以参阅CSS的伪对象选择符::selection一章节。

原文地址是:

更多内容可以参阅:

CSS如何设置选中文本的颜色: 在默认状态选中的文本颜色和背景颜色并不美观,如果能够给句网站整体的配色...

  • :enabled与 :disabled选择器

:enabled选择器

在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

示例演示

通过“:enabled”选择器,修改文本输入框的边框为2像素的红色边框,并设置它的背景为灰色

HTML代码:

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="可用输入框"  />
  </div>
   <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />
  </div>
</form>

CSS代码:

div{
  margin: 20px;
}
input[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
}

结果演示

图片 1

在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。要使用“:disabled”选择器,需要在表单元素的HTML中设置“disabled”属性。
例如为所有 type="text" 的被禁用的 input 元素设置背景色:
html代码

:disabled选择器

:disabled”选择器刚好与“:enabled”选择器相反,用来选择不可用表单元素。要正常使用“:disabled”选择器,需要在表单元素的HTML中设置“disabled”属性。

示例演示

通过“:disabled”选择器,给不可用输入框设置明显的样式。

HTML代码:

<form action="#">
  <div>
    <input type="text" name="name" id="name" placeholder="我是可用输入框" />
  </div>
  <div>
    <input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled />
  </div>
</form>

CSS代码

form {
  margin: 50px;
}
div {
  margin-bottom: 20px;
}
input {
  background: #fff;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 3px;
}
input[type="text"]:disabled {
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.15);
  color: rgba(0,0,0,.15);
}

结果演示:

图片 2

First name: <input type="text" value="Mickey" /><br>
Last name: <input type="text" value="Mouse" /><br>
Country: <input type="text" disabled="disabled" 
value="Disneyland" /><br>
</form>

:checked选择器

在表单元素中,单选按钮和复选按钮都具有选中未选中状态。(大家都知道,要覆写这两个按钮默认样式比较困难)。在CSS3中,我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。

示例演示:

通过“:checked”状态来自定义复选框效果。

HTML代码

<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="checkbox" checked="checked" id="usename" />√
    </div>
    <lable for="usename">我是选中状态</lable>
  </div>

  <div class="wrapper">
    <div class="box">
      <input type="checkbox"  id="usepwd" />√
    </div>
    <label for="usepwd">我是未选中状态</label>
  </div>
</form>

CSS代码:

form {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  margin: 30px auto;
}

.wrapper {
  margin-bottom: 10px;
}

.box {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: relative;
  border: 2px solid orange;
  vertical-align: middle;
}

.box input {
  opacity: 0;
  position: absolute;
  top:0;
  left:0;
}

.box span {
  position: absolute;
  top: -10px;
  right: 3px;
  font-size: 30px;
  font-weight: bold;
  font-family: Arial;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  color: orange;
}

input[type="checkbox"] + span {
  opacity: 0;
}

input[type="checkbox"]:checked + span {
  opacity: 1;
}

结果演示

图片 3

CSS代码

::selection选择器

::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的,效果如下图所示:

图片 4

从上图中可以看出,用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中,默认显示样式为:蓝色背景、白色文本。

有的时候设计要求,不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。

示例演示:

通过“::selection”选择器,将Web中选中的文本背景变成红色,文本变成绿色。

HTML代码:

<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下,选择网站文本是深蓝的背景,白色的字体,</p>

CSS代码:

::-moz-selection {
  background: red;
  color: green;
}
::selection {
  background: red;
  color: green;
}

结果演示:

图片 5

注意:

1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

2、Firefox 支持替代的 ::-moz-selection。

 

 

input[type="text"]:enabled
{
background:#ffff00;
}
input[type="text"]:disabled
{
background:#dddddd;
}

:read-only选择器

:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是,元素中设置了“readonly=’readonly’

示例演示

通过“:read-only”选择器来设置地址文本框的样式。

HTML代码:

<form action="#">
  <div>
    <label for="name">姓名:</label>
    <input type="text" name="name" id="name" placeholder="大漠" />
  </div>
  <div>
    <label for="address">地址:</label>
    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
  </div>
</form>

CSS代码:

form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > div {
  margin-bottom: 10px;
}

input[type="text"]{
  border: 1px solid orange;
  padding: 5px;
  background: #fff;
  border-radius: 5px;
}

input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}

结果演示

图片 6

运行结果:

:read-write选择器

:read-write”选择器刚好与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。

示例演示

使用“:read-write”选择器来设置不是只读控件的文本框样式。

HTML代码:

<form action="#">
  <div>
    <label for="name">姓名:</label>
    <input type="text" name="name" id="name" placeholder="大漠" />
  </div>
  <div>
    <label for="address">地址:</label>
    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
  </div>
</form>

CSS代码:

form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > div {
  margin-bottom: 10px;
}

input[type="text"]{
  border: 1px solid orange;
  padding: 5px;
  background: #fff;
  border-radius: 5px;
}

input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}

input[type="text"]:-moz-read-write{
  border-color: #f36;
}
input[type="text"]:read-write{
  border-color: #f36;
}

结果演示:

图片 7

图片 8

::before和::after

::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和”content”配合使用,使用的场景最多的就是清除浮动。

.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

当然可以利用他们制作出其他更好的效果,比如右侧中的阴影效果,也是通过这个来实现的。

关键代码分析:

.effect::before, .effect::after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

上面代码作用在class名叫.effect上的div的前(before)后(after)都添加一个空元素,然后为这两个空元素添加阴影特效。

Paste_Image.png

  • checked选择器

在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。:checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框)。在CSS3中,我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。
例如通过“:checked”状态来自定义复选框效果。
html代码

<div class="wrapper">
    <div class="box">
      <input type="checkbox" checked="checked" id="usename" />√
    </div>
    <lable for="usename">我是选中状态</lable>
  </div>

  <div class="wrapper">
    <div class="box">
      <input type="checkbox"  id="usepwd" />√
    </div>
    <label for="usepwd">我是未选中状态</label>
  </div>

CSS代码

form {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  margin: 30px auto;
}

.wrapper {
  margin-bottom: 10px;
}

.box {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: relative;
  border: 2px solid orange;
  vertical-align: middle;
}
.box input {
  opacity: 0;
  position: absolute;
  top:0;
  left:0;
}

.box span {
  position: absolute;
  top: -10px;
  right: 3px;
  font-size: 30px;
  font-weight: bold;
  font-family: Arial;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  color: orange;
}

input[type="checkbox"] + span {
  opacity: 0;//没有被选中的input将span设置为透明的
}

input[type="checkbox"]:checked + span {
  opacity: 1;//将选中的input的span设置为不透明的
}

运行结果

图片 9

Paste_Image.png

  • ** ::selection选择器**

注意,“::selection选择器”是双冒号。其实双冒号往往都是“伪元素”,而单冒号往往都是“伪类”。
“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的,效果如下图所示:

图片 10

QQ截图20170413150046.png

用鼠标选中“运行结果”文本时,默认显示样式为:蓝色背景、白色文本。
有的时候设计要求,不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。
示例:将鼠标选中的文本时的背景变成 orange,文本变成 white。
html代码

<body>
<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下,选择网站文本是深蓝的背景,白色的字体,
有的设计要求不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。</p>
</body>

css代码

::selection{
  background: orange;
  color: white;
}
//火狐浏览器
::-moz-selection{
  background: orange;
  color: white;
}

运行结果

图片 11

QQ截图20170413150738.png

  • ** :read-only选择器**

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是,元素中设置了“readonly=’readonly’”
举例设置textarea的只读样式
html代码

<div>
    <label for="comment">评论:</label>
    <textarea name="comment" id="" cols="30" rows="10" readonly="readonly"></textarea>
  </div>

css代码

form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > div {
  margin-bottom: 10px;
}
//火狐使用
textarea:-moz-read-only{
  border: 1px solid #ccc;
  height: 50px;
  resize: none;
  background: #eee;
}
//其它使用
textarea:read-only {
  border: 1px solid #ccc;
  height: 50px;
  resize: none;
  background: #eee;
}

运行结果

图片 12

QQ截图20170413154021.png

  • :read-write选择器

“:read-write”选择器刚好与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。
示例演示
使用“:read-write”选择器来设置不是只读控件的文本框样式。
html代码

<div>
    <label for="name">姓名:</label>
    <input type="text" name="name" id="name" placeholder="大漠" />
  </div>
  <div>
    <label for="address">地址:</label>
    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
  </div>

css代码

form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > div {
  margin-bottom: 10px;
}

input[type="text"]:-moz-read-only{
  border-color: orange;
}
input[type="text"]:read-only{
  border-color: orange;
}
input[type="text"]:-moz-read-write{
  border:2px solid red;
}
input[type="text"]:read-write{
  border:2px solid red;
}

运行结果

图片 13

Paste_Image.png

  • ** ::before和::after选择器**

这两个选择器也是双冒号,这是CSS3为了区别伪元素和伪类而使用的,单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。具体的区别请参考这个网页
before用双冒号与单冒号的区别
::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。
示例插入内容

<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<style>
 div::before
        {
            content:"CSS3教程";
        }
</style>
</head>
<body>
 <div>选择器</div>
</body>
</html>

运行结果

图片 14

QQ截图20170413160352.png

清除浮动
清除浮动是一个时常会遇到的问题,不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在,无需增加没有意义的元素,仅需要以下样式即可在元素尾部自动清除浮动:简单又不会增加元素。

.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: block; content: ""; height: 0; clear: both; visibility:hidden;}

关于clearfix清除浮动也有其他版本的写法,具体了解可以看下clearfix清除浮动进化史
clearfix清除浮动进化史
想一想

选择器
:enabled与 :disabled选择器
checked选择器
::selection选择器
:read-only选择器
:read-write选择器
::before和::after选择器

参考:慕课网


最近在忙毕业论文开题,更文较慢,请见谅

本文由10bet手机官网发布于高并发,转载请注明出处:文本自定义,CSS如何设置选中文本的颜色

上一篇:实现一个左边固定宽度,布局实例系列 下一篇:没有了
猜你喜欢
热门排行
精彩图文