您现在的位置是:首页 > 学无止境 > Web网站首页Web radio单选框css美化
radio单选框css美化
- Web
- 2019-10-25
简介如何美化radio单选框呢?字数
982.5
如何美化radio单选框呢?
美化效果
style样式
<style>
/* radio 单选 */
div.form-radio input[type="radio"] {
display: none;
}
div.form-radio input[type="radio"],
div.form-radio label {
position: relative;
vertical-align: middle;
margin: 0;
margin-right: 32px;
cursor: pointer;
}
div.form-radio input[type="radio"],
div.form-radio label {
position: relative;
vertical-align: middle;
margin: 0;
margin-right: 32px;
cursor: pointer;
}
div.form-radio input[type="radio"]:checked+label::before {
background-color: #409eff;
}
div.form-radio label::before {
display: inline-block;
content: '';
width: 20px;
height: 20px;
background: #FAFAFA;
border: 1px solid #DDDDDD;
border-radius: 50%;
vertical-align: -3px;
transition: all 0.3s ease-in;
}
div.form-radio input[type="radio"]:checked+label::after {
transform: translateY(-50%) scale(1);
}
div.form-radio label::after {
content: '';
width: 8px;
height: 8px;
background: #fff;
vertical-align: 1px;
position: absolute;
top: 50%;
left: 6px;
margin-top: -1px;
transform: translateY(-50%) scale(0.01);
transform-origin: center center;
transition: transform 0.3s ease-out;
border-radius: 50%;
}
div.form-radio {
line-height: 32px;
}
</style>
html 标签
<div class="form-radio">
<input class="form-radio-input" type="radio" value="1" name="editType" id="rdoEditorMD">
<label for="rdoEditorMD" class="form-radio-label">
MarkDown编辑器
</label>
<input class="form-radio-input" type="radio" value="2" name="editType" id="rdoEditorMD1">
<label for="rdoEditorMD1" class="form-radio-label">
MarkDown编辑器
</label>
</div>
转载:
感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/362.html”。
相关文章
- Web
- 2019-10-25
如何美化radio单选框呢?
美化效果
style样式
<style>
/* radio 单选 */
div.form-radio input[type="radio"] {
display: none;
}
div.form-radio input[type="radio"],
div.form-radio label {
position: relative;
vertical-align: middle;
margin: 0;
margin-right: 32px;
cursor: pointer;
}
div.form-radio input[type="radio"],
div.form-radio label {
position: relative;
vertical-align: middle;
margin: 0;
margin-right: 32px;
cursor: pointer;
}
div.form-radio input[type="radio"]:checked+label::before {
background-color: #409eff;
}
div.form-radio label::before {
display: inline-block;
content: '';
width: 20px;
height: 20px;
background: #FAFAFA;
border: 1px solid #DDDDDD;
border-radius: 50%;
vertical-align: -3px;
transition: all 0.3s ease-in;
}
div.form-radio input[type="radio"]:checked+label::after {
transform: translateY(-50%) scale(1);
}
div.form-radio label::after {
content: '';
width: 8px;
height: 8px;
background: #fff;
vertical-align: 1px;
position: absolute;
top: 50%;
left: 6px;
margin-top: -1px;
transform: translateY(-50%) scale(0.01);
transform-origin: center center;
transition: transform 0.3s ease-out;
border-radius: 50%;
}
div.form-radio {
line-height: 32px;
}
</style>
html 标签
<div class="form-radio">
<input class="form-radio-input" type="radio" value="1" name="editType" id="rdoEditorMD">
<label for="rdoEditorMD" class="form-radio-label">
MarkDown编辑器
</label>
<input class="form-radio-input" type="radio" value="2" name="editType" id="rdoEditorMD1">
<label for="rdoEditorMD1" class="form-radio-label">
MarkDown编辑器
</label>
</div>
转载: 感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/362.html”。