html:
<label><input type="checkbox" /><span>多选框</span></label>
<label><input type="checkbox" class="input_img_true"/><span>多选框</span></label>
<label><input type="checkbox" class="input_fillet_4" /><span>多选框</span></label>
<label><input type="radio" name="r1" checked="checked"/><span>单选框</span></label>
<label><input type="radio" name="r1" /><span>单选框</span></label>
css:
/*清除input本身的样式*/
input{
vertical-align: middle;
outline: none;/*关键代码*/
appearance:none;/*关键代码,css3的样式,必须使用*/
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari 和 Chrome */
}
/*自定义样式,这里只有多选框和单选框,其它类型的只要有清除样式了也可以自定义*/
/*多选框*/
input[type="checkbox"]{
width:15px;
height: 15px;
border: 1px solid #FF0000;
}
input[type="checkbox"]:checked{
border: 5px double #FF0000;
}
input[type="checkbox"].input_img_true:checked{
border: 1px solid #FF0000;
background: url(../img/dagou.png) no-repeat;/*更改url的路径可以改变选中时显示的图片*/
}
/*单选框*/
input[type="radio"]{
width:15px;
height: 15px;
border: 1px solid #FF0000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
input[type="radio"]:checked{
border: 5px double #FF0000; /*注意使用的是双边框的*/
}
/*多选框想要使用圆角的添加以下的样式*/
.input_fillet_4{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
转载于:https://my.oschina.net/mingriyi/blog/1975354
分享到:
相关推荐
在网页设计中,自定义多选框(checkbox)和单选框(radio button)的样式是一种常见的需求,尤其是在追求独特用户体验和品牌一致性时。本文将深入探讨如何仅使用CSS技术来实现这一目标,并确保样式在谷歌浏览器...
为了自定义样式,我们可以隐藏原始的单选框和复选框,使用CSS伪元素来模拟它们的外观: ```css input[type="radio"], input[type="checkbox"] { display: none; } ``` 2. 创建自定义框体: 使用`::before`或`::...
/* 单选按钮和复选框的自定义样式 */ .radio-label, .checkbox-label { position: relative; display: inline-block; cursor: pointer; } .radio-label::before, .checkbox-label::before { content: ""; ...
在EasyUI中,多选框的创建与单选框类似,只是标签类型改为`<input type="checkbox">`。例如: ```html <input type="checkbox" value="1" checked> <label for="checkbox1">Option 1 <input type="checkbox" value=...
在HTML5中,我们可以利用其强大的元素和属性来自定义网页的样式和功能,包括单选按钮(radio button)和复选框(checkbox)。在本案例中,"HTML5自定义网页的checkbox radiobox单选按钮和复选框.rar"压缩包文件提供...
在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的样式控制和表现力,其中之一就是自定义复选框(checkbox)和单选按钮(radiobox)。本资源"CSS3实现自定义复选框.zip"显然是一个示例项目,教你如何使用...
综上所述,利用CSS3,我们可以轻松地为网页设计出美观且实用的自定义单选框和多选框,提升用户体验,这也是现代前端开发中的一个重要技能。通过不断实践和创新,我们可以创造出更多富有个性和交互性的网页元素。
同时,可能还需要处理多个单选框或复选框之间的互斥关系,例如,对于一组单选框,只有一个能被选中,这需要用到jQuery的`prop()`方法来切换选中状态。 在实际应用中,这个zip文件中的"jiaoben181403"可能是一个HTML...
在AmazeUI中,单选框(Radio)和多选框(Checkbox)是两种常用的表单元素,它们在网页交互中起到重要的作用,比如用户在进行选择或确认操作时。下面将详细讲解AmazeUI中的单选框和多选框的使用方法、样式以及与之...
在网页设计中,为了提升用户体验,常常需要对HTML中的基础元素进行美化,其中包括单选框(radio)和复选框(checkbox)。jQuery作为一个强大的JavaScript库,提供了丰富的功能和方法来帮助开发者实现这样的需求。本...
"9款样式迷人的CSS3自定义Checkbox复选框特效源码.zip"这个压缩包文件正是为开发者提供了一系列创新且独特的复选框(Checkbox)样式设计,用于提升用户界面的视觉吸引力和交互体验。以下是这些源码中可能包含的知识...
在网页设计中,复选框和单选按钮是不可或缺的元素,它们用于用户交互,允许用户选择一个或多个选项。然而,浏览器默认的样式通常较为简单,无法满足设计师们追求个性化和美观的需求。本教程将深入探讨如何使用纯CSS...
1. **样式覆盖**:替换默认的HTML样式,使单选框和多选框看起来更加现代和吸引人。 2. **交互效果**:添加了鼠标悬停、点击等动态效果,增强用户体验。 3. **自定义配置**:提供多种可配置选项,如颜色、大小、边框...
在网页设计中,多选框(Checkbox)和单选框(Radio Button)是常见的用户交互元素,用于收集用户的选择信息。然而,原生的HTML多选框和单选框样式单一,无法满足现代网页设计的美观需求。为此,开发者通常会使用第三...
复选框(`<input type="checkbox">`)允许用户在多个选项中选择一个或多个,而单选框(`<input type="radio">`)则让用户在多个互斥的选项中选择一个。这些元素默认样式通常较为单调,不符合现代网页设计的需求。 ...
6. **CSS样式化**:虽然多选框的样式受到浏览器限制,但可以使用CSS伪类如`:checked`来改变其周围元素的状态,或者借助JavaScript库如jQuery实现自定义样式。 7. **JavaScript操作**:通过JavaScript,可以实现多选...
在这里,可能有一个或多个文件,比如 `main.js` 或 `jquery.checkbox-radio-effect.js`,它们实现了复选框和单选框的美化效果。这些脚本可能会使用 jQuery 来选择特定的 DOM 元素,监听事件,修改样式,或者添加动画...
在网页设计中,复选框(checkbox)和单选按钮(radio button)是常见的交互元素,用于用户在多个选项中进行选择。纯CSS3实现的复选框和单选按钮可以提升网页的视觉效果和用户体验,尤其适用于追求美观的WEB2.0界面。...
我们可以创建新的HTML结构,比如使用`<label>`标签,结合`<input>`元素,为单选框和复选框设计一个美观的背景图或者纯色填充。例如,可以使用伪类`:checked`来改变用户选中状态时的样式。 3. **jQuery绑定事件**:...