html checkbox样式美化

水深无声 2022-04-18 03:06 473阅读 0赞

1.html写法

<label class="my_protocol">
          <input class="input_agreement_protocol" type="checkbox" />
          <span></span>
    </label>

2.css写法

/*隐藏掉我们模型的checkbox*/
        .my_protocol .input_agreement_protocol {
                    appearance: none;
                    -webkit-appearance: none;
                    outline: none;
                    display: none;
                }
        /*未选中时*/        
       .my_protocol .input_agreement_protocol+span {
                    width: 16px;
                    height: 16px;
                    background-color: red;
                    display: inline-block;
                    background: url(../../Images/TalentsRegister/icon_checkbox.png) no-repeat;
                    background-position-x: 0px;
                    background-position-y: -25px;
                    position: relative;
                    top: 3px;
                }
       /*选中checkbox时,修改背景图片的位置*/            
       .my_protocol .input_agreement_protocol:checked+span {
                    background-position: 0 0px
                }

效果图：

![1218084-20171124011612046-1356542747.png][]

demo 图片：

![20181107172550595.png][]

[1218084-20171124011612046-1356542747.png]: /images/20220418/935e3008b65a4181a20904271d58581f.png
[20181107172550595.png]: /images/20220418/3fb3ca3b15d240428791dbb6c8a997f0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，473人围观）

还没有评论，来说两句吧...

相关阅读

相关 input file 样式美化

input file 样式美化 [点击查看文件上传美化][Link 1][https://www.buruyouni.com/static/demo/%E6%96%87%E4

冷不防/ 2023年07月12日 14:25/ 0 赞/ 9 阅读

相关 checkbox样式美化修改复选框样式

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMT

忘是亡心i/ 2023年02月17日 11:20/ 0 赞/ 46 阅读

相关美化的表格样式

<html> <head> <title></title> <style type="text/css"> body,table\{ fo

末蓝、/ 2023年01月13日 15:52/ 0 赞/ 179 阅读

相关自定义CheckBox样式

一般的自定义checkbox样式要改style文件，比较麻烦。可以直接把`button`属性设置为`@null`，然后定义一个`selector`文件，在`background

古城微笑少年丶/ 2022年06月08日 00:08/ 0 赞/ 262 阅读

相关 Checkbox选框样式

drawable文件夹下定义selector\_checkbox.xml样式文件 <?xml version="1.0" encoding="utf-8"?>

电玩女神/ 2022年06月02日 02:40/ 0 赞/ 245 阅读

相关【HTML】上传文件input样式美化

起因，最近因为一些原因，在写一个前端小页面，但是上传文件的样式怎么调整都不是很满意。遂转变思维想到了如下方法。传统写法 <form id="upform" e

Love The Way You Lie/ 2022年05月27日 12:57/ 0 赞/ 1132 阅读

相关 html checkbox样式美化

1.html写法 <label class="my_protocol"> <input class="input_agreement_protoc

水深无声/ 2022年04月18日 03:06/ 0 赞/ 474 阅读

相关 CSS小技巧--input checkbox css 样式美化

更改默认样式为： HTML <input class="magic-checkbox" type="checkbox" name="layout" id="yyc1

素颜马尾好姑娘i/ 2022年01月10日 08:15/ 0 赞/ 606 阅读

相关 android checkbox样式

<table> <tbody> <tr> <td>1. 首先要导入你准备用作CheckBox选中和补选中状态的两图片到res的drawable中，如ch

刺骨的言语ヽ痛彻心扉/ 2021年10月26日 14:42/ 0 赞/ 323 阅读

相关 Windows系统HTML滚动条美化CSS样式

Windows系统下，滚动条的美化：这个一般是全局性的配置，如果需要不同的滚动条配置不同的样式，可以在每个滚动条样式前加个class设置即可。 ::-webk

- 日理万妓/ 2021年07月24日 13:50/ 0 赞/ 777 阅读