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

最新推荐文章于 2024-08-12 16:19:20 发布

咸鸭蛋炒饭

最新推荐文章于 2024-08-12 16:19:20 发布

阅读量812

点赞数

分类专栏： HTML5基础篇文章标签： css html5 经验 html

本文链接：https://blog.csdn.net/u010853130/article/details/62277769

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

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>

咸鸭蛋炒饭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5基础加强css样式篇（checked状态伪类和清除默认样式）（十三）

1.checked状态伪类简介： HTML5初级阶段 .box { /*Add your CSS*/ } /*checkbox 元素被选中时*/ #test:checked{ border: 1px solid red; wi
复制链接

扫一扫