关于checkbox与文字没法对齐

最新推荐文章于 2023-09-12 15:40:42 发布

转载最新推荐文章于 2023-09-12 15:40:42 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shenq/p/6903429.html

本文介绍如何使用CSS解决Checkbox与Radio按钮的文字对齐问题，并展示如何更改选中状态的颜色及样式。通过调整垂直对齐及边距属性实现元素间的精确对齐，并通过背景图片自定义选中状态的表现。

关于checkbox，radio与文字没法对齐
input[type=checkbox]{vertical-align:middle; margin-top:-2px; margin-bottom:1px;}
input[type=radio]{vertical-align:middle; margin-top:-2px; margin-bottom:1px;}

改变checkbox，radio的勾颜色

input[type="checkbox"]{
    -webkit-appearance:none;
    width:13px;
    height:13px;
    background:url(../images/input.png) no-repeat -22px 0;
}
input[type="checkbox"]:focus{
    outline:none;
}
input[type="checkbox"]:checked{
    background:url(../images/input.png) no-repeat 0px 0;
}

转载于:https://www.cnblogs.com/shenq/p/6903429.html