65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 CSS 在 ASP.NET 中设置 CheckboxList/RadioButtonList 控件的样式

Clint Faraday
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.89/5 (12投票s)

2014 年 2 月 27 日

CPOL

4分钟阅读

viewsIcon

166692

本文介绍如何使用 CSS 来设置以下控件的样式：Checkbox、CheckboxList 和 RadioButtonList。

引言

最近，我启动了一个项目来创建一个 Web 应用程序，以取代完全依靠纸张完成的手动流程。 我与业务负责人会面，收集了我需要了解的所有信息，以开发第一个此类 Web 应用程序。 考虑到业务负责人会将此 Web 应用程序展示给其他外部团体，我决定为我将使用的控件添加一些额外的样式，为应用程序增添一些活力。

众所周知，ASP.NET 应用程序的大多数标准控件都可以应用各种样式的风格，在我的应用程序中，我将使用 CheckboxList 和 RadioButtonList。 我为 Button、TextBox 和 DropdownList 设计了一些基本样式，但在涉及到 CheckboxList/RadioButtonList 时，它不像之前提到的控件那样直接明了。 

所以我做了大多数其他开发人员会做的事情，我用 Google 搜索任何可以找到的东西，它会向我展示如何设置这 2 个特定控件的样式。 你猜怎么着，我没有找到任何以任何简单的方式展示如何完成此操作的内容。 我看到了文章/论坛，展示了如何手动构建 CheckBox/RadioButton 列表并向它们应用样式，但我需要列表控件固有的动态功能。 经过几个小时的搜索和阅读，我放弃了找到一些东西的希望，开始自己尝试为这些列表应用样式。 因此，在有了一些时间和想要克服的挑战之后，我最终想出了一种可以设置这些控件样式的方法。 通过 CSS，您可以控制

  • 控件的“框/圆”的颜色、文本以及“复选标记”。 
  • “框/圆”和文本的大小 

 

功能

控件的功能保持不变，您可以像往常一样以编程方式设置和读取它们。

需要牢记的事项

由于 CSS 更改了每个控件在 List Controls 中的显示方式，因此您需要注意一些事项。

  1. 每个 CheckBox/RadioButton 的可用文本长度受到限制（我不知道是什么原因造成的限制），因此如果您使用多个单词，文本将在 8 个字符后开始换行。 这就是为什么在 CSS 中使用“white-space: nowrap”来消除它的原因。
  2. 对于您的列表控件。 如果您必须应用“RepeatColumns”属性，您还需要设置“Width”属性。 这是因为每个项目之间的所有继承/自动间距都被忽略。

  3. 重要提示：当然，我们怎能忘记我们必须考虑到我们拥有的多个 Web 浏览器。 我使用 Internet Explorer v9.0 来帮助找到合适的 CSS 来设置控件的样式。 如果您仔细查看某些 CSS 代码，我会使用一些像素和 EM 来帮助布局。 这些“更改”在不同的浏览器中没有以相同的方式应用，因此您需要创建多个样式表，每个样式表针对每个主要的 Web 浏览器，将 CSS 复制到每个表中，并调整像素数字并在每个浏览器中进行测试，使用主题并在检测到哪个 Web 浏览器用于加载您的 Web 应用程序后动态加载适当的表。

以下是用于设置您的 CheckboxList/RadioButtonList 或单个 CheckBox 样式的所有 CSS 代码和 HTML（用于单个 CheckBox）。 我没有为 List 控件添加任何 HTML，因为您所要做的就是将 CssClass 引用添加到它们，控件的其他一切都保持不变。

以下是单个 CheckBox 所需的 HTML

<div class="SingleCheckbox">
    <asp:CheckBox ID="cbActive" runat="server" />
    <asp:Label ID="Label3" AssociatedControlID="cbActive" runat="server" 
      Text="Active member in group" CssClass="CheckBoxLabel"></asp:Label>
</div>

您可以看到，为了将样式“应用”到框本身，该框实际上被 CSS 创建的框替换，该框在 CSS 中处理。 由于 CheckBox 被隐藏，因此需要 Label ，并且通过将 Label 与 CheckBox 关联，文本也将是可点击的。

以下是单个 CheckBox 和 List 控件的所有 CSS 代码，可供复制和使用

.ListControl input[type=checkbox], input[type=radio]
{
    display: none;
}

.ListControl label
{
    display: inline;
    float: left;
    color: #000;
    cursor: pointer;
    text-indent: 20px;
    white-space: nowrap;
}

.ListControl input[type=checkbox] + label
{
    display          : block;
    width            : 1em;
    height           : 1em;
    border           : 0.0625em solid rgb(192,192,192);
    border-radius    : 0.25em;
    background       : rgb(211,168,255);
    background-image : -moz-linear-gradient(rgb(240,240,240),rgb(211,168,255));
    background-image : -ms-linear-gradient(rgb(240,240,240),rgb(211,168,255));
    background-image : -o-linear-gradient(rgb(240,240,240),rgb(211,168,255));
    background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(211,168,255));
    background-image : linear-gradient(rgb(240,240,240),rgb(211,168,255));
    vertical-align   : middle;
    line-height      : 1em;
    font-size        : 14px;
}

.ListControl input[type=checkbox]:checked + label::before
{
    content         : "\2714";
    color           : #fff;
    height          : 1em;
    line-height     : 1.1em;
    width           : 1em;
    font-weight     : 900;
    margin-right    : 6px;
    margin-left     : -20px;
}

.ListControl input[type=radio] + label  
{
    display          :block;
    width            : 1em;
    height           : 1em;
    border           : 0.0625em solid rgb(192,192,192);
    border-radius    : 1em;
    background       : rgb(211,168,255);
    background-image : -moz-linear-gradient(rgb(240,240,240),rgb(211,168,255));
    background-image : -ms-linear-gradient(rgb(240,240,240),rgb(211,168,255));
    background-image : -o-linear-gradient(rgb(240,240,240),rgb(211,168,255));
    background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(211,168,255));
    background-image : linear-gradient(rgb(240,240,240),rgb(211,168,255));
    vertical-align   : middle;
    line-height      : 1em;
    font-size        : 14px;
}

.ListControl input[type=radio]:checked + label::before
{
    content         : "\2716";
    color           : #fff;
    display         : inline;
    width           : 1em;
    height          : 1em;
    margin-right    : 6px;
    margin-left     : -20px;
}

Single Checkbox:
.CheckBoxLabel
{
    white-space: nowrap;
}

.SingleCheckbox input[type=checkbox]
{
    display: none;
}

.SingleCheckbox label  
{
    display: block;
    float: left;
    color: #000;
    cursor: pointer;
}

.SingleCheckbox input[type=checkbox] + label
{
    width            : 1em;
    height           : 1em;
    border           : 0.0625em solid rgb(192,192,192);
    border-radius    : 0.25em;
    background       : rgb(211,168,255);
    background-image : -moz-linear-gradient(rgb(240,240,240),rgb(211,168,255));
    background-image : -ms-linear-gradient(rgb(240,240,240),rgb(211,168,255));
    background-image : -o-linear-gradient(rgb(240,240,240),rgb(211,168,255));
    background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(211,168,255));
    background-image : linear-gradient(rgb(240,240,240),rgb(211,168,255));
    vertical-align   : middle;
    line-height      : 1em;
    text-indent      : 20px;
    font-size        : 14px;
}

.SingleCheckbox input[type=checkbox]:checked + label::before
{
    content         : "\2714";
    color           : #fff;
    height          : 1em;
    line-height     : 1.1em;
    width           : 1em;
    font-weight     : 900;
    margin-right    : 6px;
    margin-left     : -20px;
}

好了，这就是设置控件样式所需的全部内容。

希望你们中的一些人会提出新的想法和方法来进行改进。 同时，玩得开心，使用 CSS。

祝你编码和样式设计愉快。

© . All rights reserved.