基于 ASP.NET CheckBox 和 HTML5/CSS 的切换按钮
这是对“在 ASP.NET 中使用 CSS 设置 CheckboxList/RadioButtonList 控件样式”的一种替代方案。
引言
模拟的“伪”切换按钮基于 ASP.NET Checkbox 控件构建，仅应用 CSS3 样式：无需 JavaScript、jQuery 或第三方控件/库。它保留了底层 ASP.NET CheckBox 控件的所有功能。
切换按钮会根据选中/未选中的状态更改其视觉属性。在这个特定的例子中，其显示的内容与在一些假设的自动/手动模式之间切换有关，例如，显示字母“A”并附带复选标记，对应于上述自动模式（也可以用“ON”、“YES”或任何开发者偏好的词语来表示），以及字母“M”对应于手动模式（它也可以由任何字母数字组合组成，并添加任何可选的 HTML 字符）。该解决方案在内容、样式和大小定制方面提供了高度的灵活性。
背景
这个简单的模拟“伪”切换按钮控件基于 ASP.NET Checkbox，完善了 Clint Faraday [1] 提供的优秀原始解决方案。CSS 部分经过修改，使解决方案在控件定制/调整大小方面更加灵活：只需在一个地方更改大小属性，无需进行额外的定位调整。此切换按钮的两种视觉状态可以单独设置。
Using the Code
该解决方案非常简单，利用 CSS3 技术将伪元素 (::before) 添加到 ASP.NET CheckBox 渲染的 HTML 中。与两种状态相关的内容可以单独设置和格式化（请参阅 div.divToggleButton input[type=checkbox]:checked + label::before 和 div.divToggleButton input[type=checkbox]:not(:checked) + label::before CSS 部分）。
切换按钮调整大小非常简单：只需设置属性：width: 40pt; height: 40pt; line-height: 40pt; 为任何所需的值即可（与原始解决方案不同，原始解决方案需要许多额外的定位调整）。
整个解决方案（参见列表 1）封装在一个 ASP.NET Web 表单文件 (.aspx) 中，以便于清晰/可读性。
<!DOCTYPE html>
<html>
<head runat="server">
<title>ASP.NET TOGGLE BUTTON SOLUTION</title>
<style type="text/css">
/************************************************************************/
/* PSEUDO-TOGGLE BUTTON MADE OF ASP.NET CHECKBOX AND CSS3*/
div.divToggleButton input[type=checkbox]
{
display: none;
white-space: nowrap;
}
div.divToggleButton label
{
display: block;
float: left;
cursor: pointer;
}
/* set the size of the pseudo-toggle button control */
div.divToggleButton input[type=checkbox]:checked + label::before,
div.divToggleButton input[type=checkbox]:not(:checked) + label::before,
div.divToggleButton input[type=checkbox] + label
{
width: 40pt;
height: 40pt;
line-height: 40pt;
}
/* additional styling: rounded border, gradient */
div.divToggleButton input[type=checkbox] + label
{
vertical-align: middle;
text-align:center;
font-size: 16pt;
font-family:Arial, Calibri;
border: 1px solid #bdbdbd;
border-radius: 5px;
background: #f0f0f0;
/* gradient style (optional)*/
background-image: -moz-linear-gradient(top, #fdfdfd, #f9f9f9 50%, #e5e5e5 50%, #fdfdfd);
background-image: -webkit-gradient(linear, center top, center bottom,
from(#fdfdfd), color-stop(0.5, #f9f9f9), color-stop(0.5, #e5e5e5 ), to(#fdfdfd));
background-image: linear-gradient(to bottom, #fdfdfd, #f9f9f9 50%, #e5e5e5 50%, #fdfdfd);
}
/* content to display and style pertinent to unchecked state*/
div.divToggleButton input[type=checkbox]:not(:checked) + label::before
{
content: "M";
color: #303030;
opacity: 0.6;
}
/* content to display and style pertinent to checked state*/
div.divToggleButton input[type=checkbox]:checked + label::before
{
content : "A\2714";
color : #000090;
font-weight : bold;
}
/************************************************************************/
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="divToggleButton">
<asp:CheckBox ID="chkToggleButton" runat="server"
AutoPostBack="true" />
<asp:Label ID="lblToggleButton"
AssociatedControlID="chkToggleButton" runat="server"
ToolTip="Toggle between Auto and Manual mode"/>
</div>
</div>
</form>
</body>
</html>
以下显示了模拟切换按钮的示例屏幕截图，对应于在自动/手动模式之间切换的一些假设场景
关注点
请注意，语句 div.divToggleButton input[type=checkbox]:not(:checked) + label::before 是 div.divToggleButton input[type=checkbox] + label::before 的程序化等效项。通常最好显式指示控件的状态，从而避免任何潜在的不确定性。
另外，请注意，AutoPostBack="true" 仅用于演示/方便，以便查看用户单击此 ToggleButton 时页面是否实际重新加载。该解决方案保留了 ASP.NET CheckBox 控件的所有底层功能，因此无论有无 AutoPostBack 都可以正常工作。
历史
- 2015 年 3 月 16 日。此替代解决方案已发布。