纯css实现选框选中效果


本文摘自PHP中文网,作者V,侵删。

选择器介绍:

1、“+”:如 div + p 选择紧接在 <div> 元素之后的所有 <p> 元素。

2、:checked :如 input:checked 单选框和复选框的选中状态。

(学习视频分享:css视频教程)

实现代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<style type="text/css">

            .che-box {

            display:inline;

        }

        .che-box input{

            display: none;

        }

        .che-box label{

            display: inline-block;

            border: 1px solid #e1e1e1;

            border-radius: 4px;

            padding: 3px 5px;

        }

        .che-box input:checked + label{

            border-color: #088de8;

            background: #088de8;

            color: #fff;

        }

    </style>

  

  

<div class="che-box">

        <input type="checkbox" id="che1" />

        <label for="che1">

            标签1

        </label>

    </div>

    <div class="che-box">

        <input type="checkbox" id="che2" />

        <label for="che2">

            标签2

        </label>

    </div>

实现效果:

阅读剩余部分

相关阅读 >>

css怎么不占位隐藏元素

css如何清除浮动?clear和bfc方法介绍

css modules 详解

css中列表样式是什么

如何使用css让背景图片不重复

css怎么实现内容超出隐藏效果

css border-top-width属性怎么用

前端怎么学

css中如何禁用a标签按钮

css中的滑动条怎么隐藏

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...