CSS3属性笔记(三)

CSS3属性笔记选择器(下)

1 :enabled选择器

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

示例演示

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


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

</form>

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

2 :disabled选择器

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

<style>
      div{
        margin: 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);
      }
    </style>


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

</form>

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

3 :checked选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
    <style>
      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;
      }
    </style>
  </head>
<body>
<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="checkbox" checked="checked" id="usename" /><span>√</span>
    </div>
    <lable for="usename">我是选中状态</lable>

  </div>
  <div class="wrapper">
    <div class="box">
      <input type="checkbox" id="usepwd" /><span>√</span>

 </div>
  <label for="usepwd">我是未选中状态</label>
</div>

</form>
</body>
</html>

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

4 ::selection选择器

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
    <style>
      ::-moz-selection {
        background: red;
        color: green;

      }

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

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

结果演示:

注意:

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

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

 

5 :read-only选择器

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
    <style>
      form {
        border: 1px solid #ccc;
        padding: 20px;
        width: 300px;
        margin: 30px auto;
      }
      .wrapper {
        margin-bottom: 20px;
      }
      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;
      }

    </style>
  </head>
<body>
<form action="#">
  <div class="wrapper">
    <input type="text" id="usename" placeholder="中国北京" />
  </div>
  <div class="wrapper">
    <input type="text" id="usepwd" readonly="readonly"  placeholder="中国上海"/>

  </div>

</form>
</body>
</html>

 

6 :read-write选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
    <style>
      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;

      }
    </style>
  </head>
<body>
<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>
</body>
</html>

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

7 ::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 020px rgba(0,0,0,0.8);

    -moz-box-shadow:0 0 20pxrgba(0,0,0,0.8);

    box-shadow:0 0 20pxrgba(0,0,0,0.8);

    top:50%;

    bottom:0;

    left:10px;

    right:10px;

    -moz-border-radius:100px/ 10px;

    border-radius:100px /10px;

}

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值