checkbox选中时如何改变默认样式

刚刚发布了人生中的第一篇博客，有点小兴奋，紧接着再来了一篇，希望不要出现太多问题。
好了，我的废话太多了，说点有料的东西
1.是关于checkbox的，checkbox在选中、未选中的时候是有默认样式的，但是我们是干前端的，要对页面有一定的审美，所以样式很重要，听着，是很重要，一般我们选中它时，会给它一个样式，如背景图片。
这时，就要给它在选中后，也就是checked的时候加样式，怎么加呢？
上代码。。。

/* 复选框 */
input[type="checkbox"] {-webkit-appearance: none; /*清除复选框默认样式*/border: 1px solid #627BF6;vertical-align: middle;width: 18px;height: 18px;float: left;margin-top: 0;margin-right: 0 !important;border-radius: 0;
}
input[type="checkbox"]:checked {/* background-position: -48px 0; */background: #627BF6 url(../images/xz@2x.png) ; /*复选框的背景图*/background-size: contain;
}

上个选中后的效果，往下看

我这里的背景图片是36px*36px的，所以在设置w、h时都设的18px，其他的可根据自己具体情况修改！

checkbox选中时如何改变默认样式相关推荐

取消文本框被选中时边框的默认样式
取消文本框被选中时边框的默认样式文本框被选中时其边框会变为默认的样式,使用这个属性可以取消其默认样式,文本框被选中时边框无变化 outline: none; 举例 <style>#bia ...
input[type=checkbox] ; input[type=radio] 改变默认样式
/*改变checkbox 默认样式*/input[type="checkbox"] { -webkit-appearance: none; /*清除复选框默认样式*/ height ...
html的文本框选中样式,选中时的文本框样式Html/ModX
我想为我的搜索框创建样式.它的搜索框从THIS网站.我知道这一点:主动式的做法,但效果只是持续一瞬间.我目前正在使用modX,所以我的代码目前与modX条款蜂拥而至,但生病无论如何.选中时的文本框样式 ...
android ListView包含Checkbox滑动时状态改变
题外话: 在xamarin android的开发中基本上所有人都会遇到这个小小的坎,的确有点麻烦,当时我也折腾了好一半天,如果你能看到这篇博客,说明你和我当初也是一样的焦灼,如果你想解决掉这个小小的坎 ...
[置顶]android ListView包含Checkbox滑动时状态改变
题外话: 在xamarin android的开发中基本上所有人都会遇到这个小小的坎,的确有点麻烦,当时我也折腾了好一半天,如果你能看到这篇博客,说明你和我当初也是一样的焦灼,如果你想解决掉这个小小的坎 ...
详解微信小程序swiper小圆点默认样式改变
在微信小程序中,轮播图上的小圆点默认样式为黑灰色,这在视觉体验上不是很惊艳眼球,有时达不到我们的需求.那么,怎样进行默认样式的改变呢? 需要准备的东西:3张图片(swiper1,swiper2,swi ...
表单单选多选项清除默认样式小技巧
工作中做项目都会遇到表单单选.多选项的样式问题,对于一个刚入行的菜鸟来说,可能不知道如何修改很low的选项默认样式,下表给初学者提供了改变默认样式的小技巧首先要清除默认样式,非常简单的css: i ...
扩展GridView控件(7) - 行的指定复选框选中时改变行的样式
GridView既强大又好用.为了让它更强大.更好用,我们来写一个继承自GridView的控件. [索引页] [×××] 扩展GridView控件(7) - 行的指定复选框选中时改变行的样式作者:w ...
Android --- TabHost 切换时，改变选项卡下字体的状态（大小、加粗、默认被选中第一个）
上效果图: MiddleFragment.java 代码如下 import android.os.Bundle; import android.view.LayoutInflater; import ...

checkbox选中时如何改变默认样式

checkbox选中时如何改变默认样式相关推荐

最新文章

热门文章