整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
图笔记记录切图网日常，说到网页的表单美化 通常需要用到插件，因为 select，radio，checkbox比较特殊，无法通过css直接美化 ，这些也有比较不错的美化插件 可以实现，不过这都是早几年的情况，现在浏览器日益更新升级，对于html5 css3标准支持的更好，使得我们现在可以通过css3也可以进行美化，没有插件参与，就可以省事不少，同时也可以让页面代码更加简洁，用到了图片背景，不过是基于data：image 方式直接引用的，所以不用到实体图片。
复制以下代码即可实现 单选 复选美化，亲测好用。
input[type=”radio”],
input[type=”checkbox”]{
width: 1em;
height: 1em;
margin-top: 0;
vertical-align: top;
appearance: none;
background-color: #fff;
background-image: var(–bs-form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: 2px solid #e6e6e6;
print-color-adjust: exact;
cursor: pointer;
border-width: 0.125rem;
width: 1.25rem;
height: 1.25rem;
border-color: #e7e7e7;
}
lt;select>下拉框
<option>是下拉框的选项
<submit>提交按钮
<value>名称提交方式
<checked>单选按钮进入页面必选这个
<checkbox>多选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
请选择你喜欢的水果<br />
<form>
<input type="radio" value="apple" name="fruit" checked="checked"/>苹果<br />
<input type="radio" value="orange" name="fruit"/>橘子<br />
<input type="radio" value="mango" name="fruit"/>芒果<br />
<input type="submit" value="提交"/>
</form>
请选择你喜欢的水果<br />
<form>
<input type="checkbox" value="apple" name="fruit"/>苹果<br />
<input type="checkbox" value="orange" name="fruit"/>橘子<br />
<input type="checkbox" value="banana" name="fruit"/>香蕉<br />
<input type="submit" value="提交"/>
</form>
请选择你喜欢的水果<br />
<form>
<select name="fruit" size="2">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="mango" selected="selected">芒果</option>
</select><br />
<input type="submit" value="提交"/>
</form>
</body>
</html>
注本头条号，专注做前端。
经常做前端页面，单选框、复选框美化是不可或缺的，考虑到兼容性，我们通常在PC项目中用 —— checkRadio.js 来做美化，手机端H5页面则可以用css3实现 —— 因为手机端全部支持css3，记住这一点。
今天要分享的是纯css3美化，外观很时尚
//
*请认真填写需求信息，我们会在24小时内与您取得联系。
