您的位置：首页 > Web前端

前端技术学习之选择器（十一）

2017-01-16 19:27 253 查看

十二，:checked选择器

在表单元素中，单选按钮和复选按钮都有选中和未选中状态。如果有做过尝试就知道，要设置这两个按钮默认样式是比较困难的。而在css3中，可以通过:checked选择器配合其他标签实现自定义样式。而:checked表示的是选中状态。

代码例子：

<!DOCTYPE HTML>

<meta charset="utf-8">

<style type="text/css">

form {

    border: 1px solid #ccc;

    padding: 20px;

    width: 300px;

    margin: 30px auto;

}

.wrapper {

    margin-bottom: 10px;

}

.box {

    display: inline-block;

    width: 30px;

    height: 30px;

    margin-right: 10px;

    position: relative;

    background: orange;

    vertical-align: middle;

    border-radius: 100%;

}

.box input {

    opacity: 0;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 10;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/

}

.box span {

    display: block;

    width: 10px;

    height: 10px;

    border-radius: 100%;

    position: absolute;

    background: #fff;

    top: 50%;

    left: 50%;

    margin: -5px 0 0 -5px;

    z-index: 1;

}

input[type="radio"] + span {

    opacity: 0;

}

input[type="radio"]:checked + span {

    opacity: 1;

}

</style>

<form action="#">

<div class="wrapper">

<div class="box">

<input type="radio" checked="checked" id="male" name="gender"/>

<span></span>

</div>

<label for="male">男</label>

</div>

<div class="wrapper">

<div class="box">

<input type="radio" id="female" name="gender"/>

<span></span>

</div>

<label for="female">女</label>

</div>

</form>

</body>

</html>

运行效果：

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

标签： 选择器 checked css3

相关文章推荐

新的分享

章节导航