checkbox自定义样式

 时间:2024-10-14 14:29:52

1、新建一个"index.html"页面,页面写入html5标准代码.

checkbox自定义样式

2、我们做一个简单的多选测试,新建一个"input"标签,将其类型设置成checkbox.

checkbox自定义样式

3、将代码保存,打开浏览器,将页面拖入浏览器中,从效果图可以看出系统默认的样式并不好看.下面我们就来学习自定义样式的设置方法!

checkbox自定义样式

4、首先为"checkbox"增加id和class选择器,新增一个"label"标签,将其指向"checkbox"的id值,两个标签外再套一个"span"标签.如下图所示!

checkbox自定义样式

5、在页面新建内部样式,并将(class="input_check"挢旗扦渌;)标签元素隐藏,"labe造婷用痃l"标签指向"checkbox"的id选择器.将自定义样式补全.代码如下图.

checkbox自定义样式

6、我们用网页测试下,可以发现,checkbox的自定义样式就实现了.

checkbox自定义样式checkbox自定义样式
  • 在QQ看点里面如何看小说呢?
  • 如何用批处理文件实现取消自动关机
  • chrome批量清除收藏夹 同步收藏夹
  • 群晖NAS建站,内置虚拟主机突破最高30组限制.
  • mac VLC播放器怎么设置播放时直接全屏播放?
  • 热门搜索
    联通路由器怎么设置 u盘删除的文件在哪里 大于等于号怎么输入 汇中财富怎么样 朋友圈怎么转发 粤y是哪里的车牌 怎么恢复回收站 如何设置呼叫转移 哈佛汽车怎么样 旅游投资公司