<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox样式</title>
<style type="text/css" media="screen">
body{
color:#444;
font-size:1.6em;
background:#ccc;
}
.container{
width:90%;
margin:20px 3%;
padding:25px;
min-height:400px;
height:auto;
background: #FFF;
}
section
{
float:left;
width:30%;
margin:20px 20px;
}
hr{
clear:both;
}
/**
* Start by hiding the checkboxes
*/
input[type=checkbox] {
visibility: hidden;
}
/**
* Create the slider bar
*/
.checkboxOne {
width: 40px;
height: 10px;
background: #555;
margin: 20px 80px;
position: relative;
border-radius: 3px;
}
/**
* Create the slider from the label
*/
.checkboxOne label {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: -3px;
left: -3px;
background: #ccc;
}
/**
* Move the slider in the correct position if the checkbox is clicked
*/
.checkboxOne input[type=checkbox]:checked + label {
left: 27px;
}
/**
* Checkbox Two
*/
.checkboxTwo {
width: 120px;
height: 40px;
background: #333;
margin: 20px 60px;
border-radius: 50px;
position: relative;
}
/**
* Create the line for the circle to move across
*/
.checkboxTwo:before {
content: '';
position: absolute;
top: 19px;
left: 14px;
height: 2px;
width: 90px;
background: #111;
}
/**
* Create the circle to click
*/
.checkboxTwo label {
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 9px;
z-index: 1;
left: 12px;
background: #ddd;
}
/**
* Create the click event for the checkbox
*/
.checkboxTwo input[type=checkbox]:checked + label {
left: 84px;
background: #26ca28;
}
/**
* Checkbox Three
*/
.checkboxThree {
width: 120px;
height: 40px;
background: #333;
margin: 20px 60px;
border-radius: 50px;
position: relative;
}
/**
* Create the text for the On position
*/
.checkboxThree:before {
content: 'On';
position: absolute;
top: 12px;
left: 13px;
height: 2px;
color: #26ca28;
font-size: 16px;
}
/**
* Create the label for the off position
*/
.checkboxThree:after {
content: 'Off';
position: absolute;
top: 12px;
left: 84px;
height: 2px;
color: #ddd;
font-size: 16px;
}
/**
* Create the pill to click
*/
.checkboxThree label {
display: block;
width: 52px;
height: 22px;
border-radius: 50px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 9px;
z-index: 1;
left: 12px;
background: #ddd;
}
/**
* Create the checkbox event for the label
* @type {[type]}
*/
.checkboxThree input[type=checkbox]:checked + label {
left: 60px;
background: #26ca28;
}
/**
* Checkbox Four
*/
.checkboxFour {
width: 40px;
height: 40px;
background: #ddd;
margin: 20px 90px;
border-radius: 100%;
position: relative;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
/**
* Create the checkbox button
*/
.checkboxFour label {
display: block;
width: 30px;
height: 30px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
background: #333;
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
/**
* Create the checked state
*/
.checkboxFour input[type=checkbox]:checked + label {
background: #26ca28;
}
/**
* Checkbox Five
*/
.checkboxFive {
width: 25px;
margin: 20px 100px;
position: relative;
}
/**
* Create the box for the checkbox
*/
.checkboxFive label {
cursor: pointer;
position: absolute;
width: 25px;
height: 25px;
top: 0;
left: 0;
background: #eee;
border:1px solid #ddd;
}
/**
* Display the tick inside the checkbox
*/
.checkboxFive label:after {
opacity: 0.2;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 6px;
left: 7px;
border: 3px solid #333;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/**
* Create the hover event of the tick
*/
.checkboxFive label:hover::after {
opacity: 0.5;
}
/**
* Create the checkbox state for the tick
*/
.checkboxFive input[type=checkbox]:checked + label:after {
opacity: 1;
}
</style>
</head>
<body>
<section class="container">
<section>
<!-- 样式一 -->
<h3>样式一</h3>
<div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxOneInput" name="" />
<label for="checkboxOneInput"></label>
</div>
</section>
<section>
<!-- 样式二 -->
<h3>样式二</h3>
<div class="checkboxTwo">
<input type="checkbox" value="1" id="checkboxTwoInput" name="" />
<label for="checkboxTwoInput"></label>
</div>
</section>
<section>
<!-- 样式三 -->
<h3>样式三</h3>
<div class="checkboxThree">
<input type="checkbox" value="1" id="checkboxThreeInput" name="" />
<label for="checkboxThreeInput"></label>
</div>
</section>
<section>
<!-- 样式四 -->
<h3>样式四</h3>
<div class="checkboxFour">
<input type="checkbox" value="1" id="checkboxFourInput" name="" />
<label for="checkboxFourInput"></label>
</div>
</section>
<section>
<!-- 样式五 -->
<h3>样式五</h3>
<div class="checkboxFive">
<input type="checkbox" value="1" id="checkboxFiveInput" name="" />
<label for="checkboxFiveInput"></label>
</div>
</section>
<div style="clear:both;"></div>
</section>
</body>
</html>
效果图：
相关推荐
下面是纯CSS设置Checkbox复选框控件的五种简单样式，有兴趣的可以进行改动将其变成自己想要的样式。 首先，需要添加一段CSS隐藏所有的Checkbox复选框，下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS...
本压缩包“CSS3 checkbox复选框特效源码 12种.zip”包含了12个不同的CSS3复选框（checkbox）特效源码，这些源码可以帮助设计师和开发者创建出独特的、吸引用户的交互式复选框。下面将详细介绍这些CSS3复选框特效及其...
在压缩包“CheckBox复选框美化版”中，可能包含了预设的各种样式和样例代码，供开发者参考和直接应用到自己的项目中。使用时，需要根据所使用的开发环境和语言，将这些资源集成到代码中，通过适当的API或CSS类来调用...
在IT领域，尤其是在前端开发中，"checkbox复选框状态保持"是一个常见的需求，它涉及到用户界面(UI)的交互设计和数据持久化。在网页或应用程序中，复选框（checkbox）是用户进行多选操作的基本元素，允许用户对一组...
checkbox_radio.css是一款用于美化Checkbox和Radio控件的CSS小插件。通过checkbox_radio提供的样式，你可以生成基于bootstrap，或字体图标，或图片的Checkbox和Radio美化样式。
这只是利用CSS自定义Checkbox样式的一个例子，实际上还可以实现更多创意设计，比如圆形复选框、图标复选框等。你可以根据自己的需求和网页风格，自由发挥创造力，为复选框添加更多个性化的样式。 总的来说，CSS的复...
网页模板设计中，仿苹果风格的CheckBox复选框代码是一个重要的设计元素，它能够为网站带来独特的视觉体验和一致的用户交互。苹果公司的设计语言以其简洁、优雅和易用性著称，许多开发者和设计师都会尝试在自己的项目...
为了解决这个问题，开发者们创造了各种库和框架来美化这些元素，其中“PrettyCheckbox”就是一个专门针对复选框和单选按钮进行美化的纯CSS库。 “Pretty Checkbox”库的核心理念在于通过CSS样式来改变HTML原生的复...
无论是在哪种环境或语言下，实现复选框功能的关键在于理解如何创建控件、设置样式、以及如何捕获和响应用户的交互。在实际项目中，通常会将多个复选框动态生成，比如根据数据源动态创建，或者通过循环结构生成。这...
CheckBox具有text属性，用于显示复选框旁边的文本，checked属性来设置或获取当前是否被选中，还有onCheckedChanged信号，当复选框状态改变时触发。 自定义复选框通常涉及到以下方面： 1. **样式定制**：你可以通过...
dtree_checkbox是dtree的一个增强版本，它引入了复选框功能，使得用户可以选择一个或多个节点。这一特性在需要多选操作的场景下非常实用，例如在文件管理器中选择多个文件进行操作。dtree_checkbox的主要特点包括： ...
例如，可以创建一个新类`.custom-checkbox`，并设置适当的样式以恢复复选框的正常功能，如下： ```css .custom-checkbox { pointer-events: auto !important; opacity: 1 !important; display: inline-block !...
关于压缩包中的"ComboBox_jb51"，可能是某个特定的复选框组件或者库，这通常包含了自定义的CSS样式和JavaScript代码，用于实现更复杂的效果，如分组、嵌套、全选/全取消等。这种组件往往能提供更好的用户体验，比如...
在Asp.net Web应用程序开发中，"带复选框的下拉表"是一种常见的用户界面元素，它结合了下拉列表的紧凑性与复选框的多选功能，为用户提供了一种更直观、灵活的选择方式。这样的控件通常用于需要用户从多个选项中选择...
本文将详细介绍如何使用纯CSS3实现简单而实用的复选框和单选框。 首先，CSS3提供了许多新的选择器和属性，使得我们可以自定义HTML元素的样式，包括复选框和单选框。在上述示例中，我们看到HTML代码中使用了`<input>...
这篇文章讲述的是如何仅使用CSS3技术来创建视觉上吸引人的复选框（checkbox）和单选按钮（radio）。以下是通过文章内容提炼出的知识点： 1. CSS3实现复选框和单选按钮：复选框和单选按钮是表单元素中用来允许用户在...
"带复选框的ComboBox控件"是一种常见的UI元素，它结合了ComboBox（组合框）和CheckBox（复选框）的功能，为用户提供了一种多选交互方式。这种控件允许用户在下拉列表中选择一个或多个选项，而不仅仅是单选。 ...
"mtree1.0-checkbox-tableTree-带复选框树形控件"是一个专门设计用于Web应用的组件，它集成了复选框功能的树形表格控件。这个控件允许用户在树形结构中选择一个或多个节点，通过复选框进行操作，增加了交互性和数据...
在网页设计中，Radio单选项和Checkbox复选框是常见的表单元素，用于收集用户的选择信息。然而，由于浏览器的安全限制，直接通过CSS（层叠样式表）来改变Radio和Checkbox的默认样式通常是无效的。这是因为这些原生的...