1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

css3表单选择器

css3 表单常用选择器

一、:enabled选择器

    定义:在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,

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

    例如:

        input[type="text"]:enabled {/*修改文本输入框的边框为2像素的红色边框*/

            order: 2px solid red;

          }

二、:disabled选择器

      定义:“:disabled”选择器刚好与“:enabled”选择器相反,用来选择不可用表单元素。

          要正常使用“:disabled”选择器,需要在表单元素的HTML中设置“disabled”属性。

      例如:

        input[type="text"]:disabled {/*给不可用输入框设置明显的样式*/

            background: rgba(0,0,0,.15);

            border: 1px solid rgba(0,0,0,.15);

            color: rgba(0,0,0,.15);

          } 

三、:checked选择器

      定义:在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。(大家都知道,要覆写这两个按钮默认样式比较困难)。

          在CSS3中,我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。

      例如:

          input[type="checkbox"]:checked + span {/*自定义复选框选中的效果*/

            opacity: 1;

          } 

四、:selection选择器

    定义::selection”伪元素是用来匹配突出显示的文本

    例如:

      ::-moz-selection {/*用鼠标选择网页文本 被选中的背景是红色 字体颜色变绿*/

          background: red;

          color: green;

        }

      ::selection {

          background: red;

          color: green;

        } 

五、:read-only选择器

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

    例如:

      input[type="text"]:read-only{/*设置只读文本框的样式。*/

          border-color: #ccc;

        }

      input[type="text"]:-moz-read-only{

          border-color: #ccc;

        }

:read-write选择器

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

      例如:

        input[type="text"]:-moz-read-write{/*设置读写文本框的样式。*/

            border-color: #f36;

          }

        input[type="text"]:read-write{

            border-color: #f36;

          }

七、::before和::after

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

      例如:

        .clearfix::before,

        .clearfix::after {

          content: ".";

          display: block;

          height: 0;

          visibility: hidden;

        }

        .clearfix:after {clear: both;}

        .clearfix {zoom: 1;}

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>     <style type="text/css">      /*选择获得焦点状态的input元素*/      /*input:focus{      	background: orange;      }*/      /*选择已启用的*/      /*input:enabled{      	background: blue;      }*/      /*选择未启用(禁用)的*/      /*input:disabled{      	background: orange;      }*/      /*选择每个被选中的input元素,这个不好使,不显示出来*/      input:checked{      	background: purple;      }      </style>      </head>      <body>      <input type="checkbox" />      <input type="checkbox" />      <input type="checkbox" />      <input type="checkbox" />      <input type="text" />      <input type="text" />      <!-- disabled未启用的 -->      <input type="text"  value="666" disabled="disabled" />      </body>      </html>

原文链接:https://www.qiquanji.com/post/7129.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: