首页 > 软件开发 > HTML >

checkbox自定义样式

来源:互联网 2023-03-16 19:12:35 449

checkbox是html标签,多用于页面表单,今天小编就来说说checkbox如何自定义样式.gSA办公区 - 实用经验教程分享!

工具/原料

  • Sublimeb编辑器,浏览器

方法/步骤

  • 1

    新建一个"index.html"页面,页面写入html5标准代码.gSA办公区 - 实用经验教程分享!

    checkbox自定义样式gSA办公区 - 实用经验教程分享!

  • 1此文章未经许可获取自百度经验
  • 2

    我们做一个简单的多选测试,新建一个"input"标签,将其类型设置成checkbox.gSA办公区 - 实用经验教程分享!

    checkbox自定义样式gSA办公区 - 实用经验教程分享!

  • 3

    将代码保存,打开浏览器,将页面拖入浏览器中,从效果图可以看出系统默认的样式并不好看.下面我们就来学习自定义样式的设置方法!gSA办公区 - 实用经验教程分享!

    checkbox自定义样式gSA办公区 - 实用经验教程分享!

  • 4

    首先为"checkbox"增加id和class选择器,新增一个"label"标签,将其指向"checkbox"的id值,两个标签外再套一个"span"标签.如下图所示!gSA办公区 - 实用经验教程分享!

    checkbox自定义样式gSA办公区 - 实用经验教程分享!

  • 5

    在页面新建内部样式,并将(class="input_check")标签元素隐藏,"label"标签指向"checkbox"的id选择器.将自定义样式补全.代码如下图.gSA办公区 - 实用经验教程分享!

    checkbox自定义样式gSA办公区 - 实用经验教程分享!

  • 6

    我们用网页测试下,可以发现,checkbox的自定义样式就实现了.gSA办公区 - 实用经验教程分享!

    checkbox自定义样式gSA办公区 - 实用经验教程分享!

    checkbox自定义样式gSA办公区 - 实用经验教程分享!

  • 注意事项

    • 以上为小编个人总结,都经过验证。可以将网页代码编辑下来学习!
    • 更多可以留言交流,希望能帮助到你!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!gSA办公区 - 实用经验教程分享!


    标签: 编程语言HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码