Question

我想将标准asp.net复选框的标准“3D”外观更改为固定1px。如果我尝试将样式应用于边框，例如它就是这样 - 绘制带有边框的标准复选框 - 我猜这是有效的。

无论如何，有没有办法改变实际文本框的样式？

Answer 1

与其使用某些非标准控件，您应该做的是使用非突兀的javascript来实现它。有关示例，请参阅http://code.google.com/p/jquery-checkbox/。

使用标准ASP复选框可以简化代码编写过程。您不必编写自己的用户控件，也不必更新所有现有代码/页面。

更重要的是，它是所有浏览器都能识别的标准HTML控件。它可供所有用户访问，如果他们没有javascript就可以工作。例如，盲人的屏幕阅读器将能够将其理解为复选框控件，而不仅仅是具有链接的图像。

Answer 2

我认为使CheckBox看起来真正不同的最好方法是根本不使用复选框控件。更好地使用您自己的图像在超链接或图像元素的顶部检查/取消选中状态。欢呼声。

Answer 3

最简单的最佳方法，使用自定义设计的ASP复选框控件。

 chkOrder.InputAttributes["class"] = "fancyCssClass";

你可以使用类似的东西..希望有所帮助

Answer 4

为什么不使用Asp.net CheckBox按钮和Ajax控件工具包提供的ToggleButtonExtender。

Answer 5

使用ASP.NET Web窗体和Bootstrap时，上述任何一项都无法正常工作。

我最终使用了Paul Sheriff的Simple Bootstrap CheckBox for Web Forms

<style>
    .checkbox .btn, .checkbox-inline .btn {
    padding-left: 2em;
    min-width: 8em;
    }
    .checkbox label, .checkbox-inline label {
    text-align: left;
    padding-left: 0.5em;
    }
    .checkbox input[type="checkbox"]{
        float:none;
    }
</style>


<div class="form-group">
    <div class="checkbox">
        <label class="btn btn-default">
            <asp:CheckBox ID="chk1" runat="server" Text="Required" />
        </label>
    </div>
</div>

结果看起来像这样......

Answer 6

不确定它是否真的是一个与asp.net相关的问题..在这里给出一个很好的信息：

http://www.456bereastreet.com/archive/200409/styling_form_controls/

Answer 7

请记住， asp：CheckBox 控件实际上输出的不仅仅是一个复选框输入。

例如，我的代码输出

<span class="CheckBoxStyle">
    <input id="ctl00_cphContent_cbCheckBox" 
           name="ctl00$cphContent$cbCheckBox"
           type="checkbox">
</span>

其中 CheckBoxStyle 是应用于控件的CssClass属性的值， cbCheckBox 是控件的ID。

要设置输入样式，您需要将CSS写入目标

span.CheckBox input {
  /* Styles here */
}

Answer 8

将此代码粘贴到您的css中，它可以让您自定义复选框样式。但是，它不是最好的解决方案，它在现有的复选框/单选按钮上显示你的风格。

   input[type='checkbox']:after 
{

        width: 9px;
        height: 9px;
        border-radius: 9px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #3B8054;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 3px solid #3B8054;
        transition: 0.5s ease;
        cursor: pointer;

}

input[type='checkbox']:checked:after 
    {
        background-color: #9DFF00;
    }

Answer 9

他们真的依赖浏览器。

也许你可以在this关于更改文件浏览按钮的问题中做一些与答案类似的事情。

Answer 10

好吧，我经历了所有可以找到的解决方案。

Ajax Control Toolkit可以使用，但是它创建了一个奇怪的html输出，其中包含各种范围和难以使用的其他样式。

使用带有::before标签的css样式来隐藏原始控件的框是可行的，但是如果将runat=server放置到元素中以使后面的代码可以访问它，则复选框不会更改值，除非您实际单击原始控件。

在某些方法中，如果文本对于查看屏幕而言太长，则标签的整行将在复选框下方结束，或者在复选框下方结束。

最后，（根据@dimarzionist在此页面上的回答，）我使用了asp.net ImageButton并使用了背后的代码来更改图像。通过此解决方案，我可以很好地控制样式，并可以确定是否从背后的代码中选中了该框。

<asp:ImageButton ID="mycheckbox" CssClass="checkbox"  runat="server" OnClick="checkbox_Click" ImageUrl="unchecked.png" />
<span class="checkboxlabel">I have read and promise to fulfill the <a href="/index.aspx">rules and obligations</a></span>

在后面的代码中

    protected void checkbox_Click(object sender, ImageClickEventArgs e) {
        if (mycheckbox.ImageUrl == "unchecked.png") {
            mycheckbox.ImageUrl = "checked.png";
            //Do something if user checks the box
        } else {
            mycheckbox.ImageUrl = "unchecked.png";
            //Do something if the user unchecks the box
        }
    }

此外，此方法还可以使用，用于复选框文本的<span>将与复选框完美地包装在一起。

.checkboxlabel{
    vertical-align:middle;
    font-weight: bold;
}
.checkbox{
    height: 24px;  /*height of the checkbox image*/
    vertical-align: middle;
}

使用CSS更改Asp的样式/外观：CheckBox

10 个答案: