CSS3每日一练之选择器-状态伪类选择器[二]
过去我们的form元素有可用和不可用状态,我们分别为它们定义不同的class来实现,然后通过js对其元素设置可用状态的同时指定不同的class即可。然而我们有了CSS3就没必要这么麻烦了,js只需要指定可用状态,样式会自己选择,非常方便,js代码也很精简。
:enabled选择器和:disabled选择器
:enabled状态伪类选择器用来指定当前元素处于可用状态的样式;
:disabled状态伪类选择器用来指当前元素处于不可用状态的样式;
代码案例如下:
:enabled选择器和:disabled选择器
:enabled状态伪类选择器用来指定当前元素处于可用状态的样式;
:disabled状态伪类选择器用来指当前元素处于不可用状态的样式;
代码案例如下:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="gb2312">
- <title>CSS3每日一练之选择器-状态伪类选择器[二] |
前端开发网(W3Cfuns.com)!</title>
- <script type="text/javascript">
- window.onload = function()
- {
- var rd1 = document.getElementById("radio1");
- var rd2 = document.getElementById("radio2");
- var tb = document.getElementById("textBox");
-
- rd1.onclick = function()
- {
- tb.value = "状态:可用 | 前端开发网(W3Cfuns.com)!";
- tb.disabled = false;
- }
-
- rd2.onclick = function()
- {
- tb.value = "状态:不可用 | 前端开发网(W3Cfuns.com)!";
- tb.disabled = true;
- }
- }
- </script>
- <style type="text/css">
- *{margin:0; padding:0;}
- body{margin-bottom:20px; font-size:14px;}
- #content{margin:30px auto; padding:10px; width:300px;
overflow:hidden;}
- label{display:inline; margin-bottom:5px;
width:150px; height:25px; line-height:25px; float:left;}
- #textBox{display:block; width:300px; height:22px;
line-height:22px; font-family:"Microsoft yahei"; outline:none;}
- #textBox:enabled{border:1px #eee solid;
border-top:1px #d1d1d1 solid;}
- #textBox:disabled{border:1px #999 solid;
background:#efefef;}
- </style>
- </head>
-
- <body>
- <div id="content">
- <label for="radio1"><input id="radio1"
name="radio" type="radio" checked/>可用:enabled</label>
- <label for="radio2"><input id="radio2"
name="radio" type="radio"/>不可用:disabled</label>
- <input id="textBox" type="text" value="状态:可用 |
前端开发网(W3Cfuns.com)!"/>
- </div>
- </body>
- </html>
【CSS3每日一练之选择器-状态伪类选择器[二]】相关文章
本文来源:https://www.51html5.com/a868.html
﹝CSS3每日一练之选择器-状态伪类选择器[二]﹞相关内容
- CSS3每日一练之选择器-结构性伪类选择器[四]
- CSS3每日一练之选择器-兄弟元素选择器
- CSS3每日一练之选择器-属性选择器
- CSS3每日一练之选择器-插入文字
- HTML5每日一练之progress标签的应用
- HTML5每日一练之视频标签的应用
- HTML5每日一练之OL列表的改良
- HTML5每日一练之datalist标签自动补全的使用
- HTML5每日一练之FileList文件列表对象的应用
- HTML5每日一练之figure新标签的应用