第7章 征服CSS格式（下）

< > 7-1

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<form action="#">
 
  <div>
    <label for="enabled">可用输入框:</label>
    <input type="text" id="enabled" />
  </div>

  <div>
    <label for="disabled">禁用输入框:</label>
    <input type="text" id="disabled" disabled="disabled" />
  </div>
  
 </form>  
 </body>
 </html>
div {
  margin: 30px;
}
input[type="text"]:enabled {
  border: 1px solid #f36;
  box-shadow: 0 0 5px #f36;
}

input[type="text"]:disabled{
  box-shadow: none;
}

 

CSS3选择器 :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;
}

结果演示

任务

在右边CSS编辑器中的第4行输入正确代码，可用输入框设置一个#f36颜色的边框以及5px的阴影色。

posted @ 2017-10-18 22:20  罪恩徒斯  阅读(64)  评论(0)    收藏  举报