您的位置：首页 > Web前端 > HTML5

HTML5基础加强css样式篇（checked状态伪类和清除默认样式）（十三）

2017-03-15 23:48 441 查看

1.checked状态伪类简介：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5初级阶段</title>
<style type="text/css">
.box {
/*Add your CSS*/
}
/*checkbox 元素被选中时*/
#test:checked{
border: 1px solid red;

width: 50px;
height: 50px;

/*CSS3提供，清除默认样式 这个比较重要*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

/*          一个样式被添加厂商前缀
1.该样式正处于试验阶段。
2.浏览器特有的样式。
*/

}

</style>
</head>
<body>
<div class="box"></div>

<input type="checkbox" id="test">

<script type="text/javascript">
//        Add your code

</script>
</body>
</html>

2.checked伪类简单应用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5初级阶段</title>
<style type="text/css">

#test{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

width: 24px;
height: 24px;

background: url("img/icon_check.png");

outline: none;
}

#test:checked{
background: url("img/icon_checked.png");
}

</style>
</head>
<body>
<div class="box"></div>

<input type="checkbox" id="test">

<script type="text/javascript">
//        Add your code

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html5 经验 html

相关文章推荐

新的分享

章节导航