自定义radio/checkbox样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义radio/checkbox样式</title>
<style>
*{
    padding: 0;
    margin: 0;
}
input[type=checkbox]{
    display: none;
}
/*未选中样式*/
.checkbox{
    color: green;
}
/*选中样式((可以设置背景图片等)*/
input[type=checkbox]:checked + .checkbox{
    color: red;
}
</style>
</head>

<body>
   <label>
       <input type="checkbox" name="" id="" value="" />
       <span class="checkbox">是否选择</span>
   </label>
</body>

</html>

原文地址:https://www.cnblogs.com/mengfangui/p/9255412.html

时间: 2024-08-02 09:52:28

自定义radio/checkbox样式的相关文章

改变radio/checkbox样式

直接上代码 .item input[type="radio" ] { width: 20px; height: 20px; background: #fff; -webkit-appearance: none; border: 1px solid #999; } .item input[type="radio" ]:checked { background:url("../img/select.png"); background-size: co

微信小程序 - radio/checkbox自定义组件

自定义radio/checkbox组件,可根据自己要求自行修改 点击下载:示例 原文地址:https://www.cnblogs.com/cisum/p/10324607.html

巧用CSS3伪类选择器自定义checkbox和radio的样式

由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的checkbox和radio,然后用js实现选中和未选中时候的样式,用来模拟checkbox和radio. 例如这种: 用其他元素模拟(以checkbox为例): <div class='checkbox'></div> $('.checkbox').click(function(){

WPF 自定义CheckBox样式

自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状态,设置边框.透明度等 选中的话,我们可以设置√和背景. <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}"> <Setter Property="SnapsToDevice

自定义input[type=&quot;radio&quot;]的样式

对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: html: <form action=""> <div class="sex"> <div class="female"> <label for="female">女</label>

checkbox和radio的样式美化问题

如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对定位的方式,手动切换checked和unchecked的图片,定位到原来input显示的地方: 2.使用jQuery的iCheck插件 . 中文DOC地址:http://www.bootcss.com/p/icheck/ github地址:https://github.com/fronteed/iC

论checkbox和radio的样式美化问题

如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对定位的方式,手动切换checked和unchecked的图片,定位到原来input显示的地方: 2.使用jQuery的iCheck插件 . 中文DOC地址:http://www.bootcss.com/p/icheck/ github地址:https://github.com/fronteed/iC

怎么修改单选框radio默认样式

jQuery 实现下这个效果,因此不一定是最佳方案,背景图直接从网上找到.:)先把 HTML 码好: <div>   <input type="radio" id="nba" checked="checked" name="sport" value="nba">   <label name="nba" class="checked" fo

自定义的ChecBox 样式

.xml里面 <CheckBox android:id="@+id/checkBox1" android:layout_width="29dp" android:layout_height="29dp" android:layout_alignBaseline="@+id/textView1" android:layout_alignBottom="@+id/textView1" android:la