修改form表单radio样式
程序员文章站
2022-06-11 19:21:12
...
<div class="main-form-block-radio">
<label class="main-form-label">数据库配置</label>
<div class="main-form-block-radio">
<label class="main-step3-radio" for="main-step3-radio-local">
<input type="radio" class="main-form-radio" id="main-step3-radio-local" value="本地" name="sql" checked>
<span></span>
本地
</label>
<label class="main-step3-radio" for="main-step3-radio-distributed">
<input type="radio" class="main-form-radio" id="main-step3-radio-distributed" value="分布式" name="sql">
<span></span>分布式
</label>
</div>
</div>
.main-form-block-radio {
display: flex;
display: -webkit-flex;
flex-direction: row;
margin-bottom:10px;
}
.main-form-block-radio .main-form-label {
text-align:left;
}
.main-form-radio {
display:none;
}
.main-step3-radio {
position:relative;
height:38px;
padding:0 20px 0 30px;
line-height: 38px;
}
/* .main-form-radio[type="radio"]+span {
display:inline-block;
border-radius:3px;
width:20px;
height:20px;
border:1px solid #929292;
color:#929292;
position:absolute;
top:8px;
left:0;
}
.main-form-radio[type="radio"]:checked + span:after {
content:'\2714';
position:absolute;
font-size:24px;
left:2px;
top:-8px;
color:#1e9fff;
} */
.main-form-radio[type="radio"]+span {
display:inline-block;
border-radius:50%;
width:20px;
height:20px;
border:1px solid #929292;
box-shadow: 1px 1px 1px #cac9c9;
color:#929292;
position:absolute;
top:8px;
left:0;
transform: scale(1);
/*transition:.5s;*/
}
.main-form-radio[type="radio"]:checked + span:after {
content:'';
position:absolute;
width:10px;
height:10px;
border-radius:50%;
background:#1e9fff;
left:5px;
top:5px;
}
.main-form-radio[type="radio"]:checked + span{
border:1px solid #1e9fff;
animation: mymove .5s 1
}
@keyframes mymove {
0% { transform: scale(0); }
25% { transform: scale(0.25) }
75% { transform: scale(1.25) }
100% { transform: scale(1) }
}
上一篇: 【踩坑】那些实战上的踩坑笔记汇总
下一篇: python实现ldap接入
推荐阅读
-
用 Javascript 验证表单(form)中的单选(radio)值
-
如何使用Jquery获取Form表单中被选中的radio值
-
用 Javascript 验证表单(form)中的单选(radio)值
-
form表单内容编辑,只提交已经修改的部分,未修改的部分不提交
-
js通过后台数据回填form表单时,select和radio选中问题
-
form表单内容编辑时 只提交已经修改的部分,未修改的部分不提交
-
Activiti_modeler 5.22(在线流程编辑器的自定义选择表单样式修改) (二)
-
修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标
-
Jquery 获取form表单text,areatext,radio,checkbox,select值
-
将form表单提交文件修改为ajax提交