CSS属性选中器:enabled的案例解析（代码实例）
本文目标：
1、把握CSS中构造性伪类选中器—enabled的用途
问题：
1、实现以下表单，且使用纯DIV+CSS，必需使用选中器—enabled
附加说明：
1、年龄，身份证，手机号，均是可以输入的，但是地址输入框不成以输入，默许就是湖南
2、团体宽度380,上下摆布padding为20，团体居中显示
3、头像图标宽为40，其他图标大小也是40
此刻来详细操纵
1、预备素材：按照目标得知，看到的图标都是要切的素材
2、创立好index.html，写好架构，架构怎样剖析呢
思绪剖析：
1、目标分为一个标题+一个表单
2、表单我们可以通过ul来规划，且li里的图标我们将他们作为背景这样可以很简便的让图标在li内垂直居中，且居左
好，先依照剖析，写好思绪，临时不管css的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选中器:enabled</title>
</head>
<body>
<div class="container">
<h2 class="title">
请完美信息
</h2>
<form action="#">
<ul>
<li class="avatar">
<img src="images/avatar.jpg" />
</li>
<li class="item age">
<input type="text" id="enabled" value="请输入年龄" />
</li>
<li class="item sfz">
<input type="text" id="enabled" value="请输入身份证"/>
</li>
<li class="item sj">
<input type="text" id="enabled" value="请输入手机号" />
</li>
<li class="item addr">
<input type="text" id="disabled" value="湖南" disabled="disabled" />
</li>
<li class="item">
<input type="button" value="提交" />
<input type="button" value="取消" />
</li>
</ul>
</form>
</div>
</body>
</html>3、写样式 ，创立css文件夹，里面创建index.css，里面的样式如何写了，以下是剖析思绪
思绪剖析：
.container * 公共样式
1、写了这么多案例，这一步根本上是必不成少的，也是为了减少代码冗余性，所以在这里我们可以定义公共的样式
所以index.css中增加代码如下：
.container *{
padding:0;
margin:0;
}.container 外层容器
1、按照附加说明得知，宽380px,居中显示，所以需要margin:0 auto,上下摆布均有间距
所以index.css中增加代码如下：
.container{
width:380px;
margin:0 auto;
padding:20px;
}form 表单
1、按照目标得知，它有一个灰色边框
所以index.css中增加代码如下：
form{
border:1px solid lightgray;
}.avatar .avatar img 头像
1、头像要居中，且上下也存在padding
2、头像图片宽度为40，且带圆形边框，上下摆布均有padding
所以index.css中增加代码如下：
.avatar{
text-align: center;
padding:10px 0!important;
}
.avatar img{
width: 40px;
border: 1px solid gray;
border-radius: 40px;
padding: 10px;
}ul li
1、li不带黑色圆点，所以无样式
所以index.css中增加代码如下：
ul li{
list-style: none;
}.item li的公共样式设定
1、左边由于有背景图标，所以需要padding-left,高度60，为了让他居中，所以line-height也要设定成一样
2、背景图标大小40，且水平标的目的上居左，垂直标的目的上居中
3、背景图标不反复
所以index.css中增加代码如下：
.item{
padding-left: 50px;
height: 60px;
line-height: 60px;
background-size: 40px;
background-position-y: center;
background-position-x: left;
background-repeat: no-repeat;
}li的背景图标设定
1、为每个li设定本人的背景图片
所以index.css中增加代码如下：
.age{
background-image: url(../images/age.png);
}
.sfz{
background-image: url(../images/sfz.png);
}
.sj{
background-image: url(../images/sj.png);
}
.addr{
background-image: url(../images/addr2.png);
}text类型输入框 公共样式设定
1、宽度为300,高30，存在上间距
所以index.css中增加代码如下：
input[type="text"]{
width:300px;
height:30px;
margin-top: 10px!important;
}可编纂的输入框设定
1、这里我们可以使用enabled知识点来设定了，input[type="text"]:enabled来匹配，然后带2个像素的灰色左边边框，且背风光为浅绿
所以index.css中增加代码如下：
input[type="text"]:enabled {
border-left:2px solid lightgray;
background-color:lightgreen;
}按钮设定
1、宽度为150px，高40px
所以index.css中增加代码如下：
input[type="button"]{
width:150px;
height:40px;
}h2 标题设定
1、标题要居中，且上下存在padding
所以index.css中增加代码如下：
h2{
text-align:center;
padding:10px 0!important;
}好，到当前为止，我们把想到的样式全部写好了，详细不合错误，我们再来修改
当前为止，css所有内容如下：
.container *{
padding:0;
margin:0;
}
.container{
width:380px;
margin:0 auto;
padding:20px;
}
form{
border:1px solid lightgray;
}
.avatar{
text-align: center;
padding:10px 0!important;
}
.avatar img{
width: 40px;
border: 1px solid gray;
border-radius: 40px;
padding: 10px;
}
ul li{
list-style: none;
}
.item{
padding-left: 50px;
height: 60px;
line-height: 60px;
background-size: 40px;
background-position-y: center;
background-position-x: left;
background-repeat: no-repeat;
}
.age{
background-image: url(../images/age.png);
}
.sfz{
background-image: url(../images/sfz.png);
}
.sj{
background-image: url(../images/sj.png);
}
.addr{
background-image: url(../images/addr2.png);
}
input[type="text"]{
width:300px;
height:30px;
margin-top: 10px!important;
}
input[type="text"]:enabled {
border-left:2px solid lightgray;
background-color:lightgreen;
}
input[type="button"]{
width:150px;
height:40px;
}
h2{
text-align:center;
padding:10px 0!important;
}将css参加html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选中器:enabled</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<h2 class="title">
请完美信息
</h2>
<form action="#">
<ul>
<li class="avatar">
<img src="images/avatar.jpg" />
</li>
<li class="item age">
<input type="text" id="enabled" value="请输入年龄" />
</li>
<li class="item sfz">
<input type="text" id="enabled" value="请输入身份证"/>
</li>
<li class="item sj">
<input type="text" id="enabled" value="请输入手机号" />
</li>
<li class="item addr">
<input type="text" id="disabled" value="湖南" disabled="disabled" />
</li>
<li class="item">
<input type="button" value="提交" />
<input type="button" value="取消" />
</li>
</ul>
</form>
</div>
</body>
</html>运转结果如下：
细心视察，发明Ul没有居中，所以还要对ul设定一下
把以下代码参加css中
剖析：
1、由于li有50的左padding,然后每个文本框都有边框，且有本人的宽度，所以宽度355，要居中，所以需要margin
ul{
width: 355px;
margin: 0 auto!important;
}运转结果如下：
总结：
1、学习了构造性伪类选中器—enabled用途，它可以大量猎取到所有可编纂的元素
以上就是CSS属性选中器:enabled的案例解析（代码实例）的具体内容，更多请关注百分百源码网其它相关文章！
