小麦子 发表于 2024-12-3 11:37:22

css3自定义复选框、单选框




插件描述:css3+jq脚本实现自定义单多选框,美化插件,简单易用

入门指南 头部引入css文件:
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/checkbox_radio.css" type="text/css">
<title>
CSS3实现自定义复选框
<label for="chk">checkbox</label>
<input type="checkbox" id="chk" name="chk"> <input type="checkbox" id="chk2" name="chk2" checked>

<br><br>

<label for="rad">radio</label>
<input type="radio" id="rad" name="rad[]">
<input type="radio" id="rad2" name="rad[]">
<input type="radio" id="rad3" name="rad[]" checked>

<input type="radio" id="rad7" name="rad">
<input type="radio" id="rad8" name="rad" checked>
调用脚本:(index.js必须放在input之后)
<script src="js/index.js"></script>
以下是完整代码:

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">

<title>CSS3实现自定义复选框</title>

   <link rel="stylesheet" href="css/checkbox_radio.css" type="text/css">

</head>

<body>


<div class="wrapper">

<label for="chk">checkbox</label>
<input type="checkbox" id="chk" name="chk"> <input type="checkbox" id="chk2" name="chk2" checked>

<br><br>

<label for="rad">radio</label>
<input type="radio" id="rad" name="rad[]">
<input type="radio" id="rad2" name="rad[]">
<input type="radio" id="rad3" name="rad[]" checked>

<input type="radio" id="rad7" name="rad">
<input type="radio" id="rad8" name="rad" checked>

</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script src="js/index.js"></script>



</body>
</html>

页: [1]
查看完整版本: css3自定义复选框、单选框