11

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

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

4

10 回答 10

14

而不是使用一些非标准的控件，你应该做的是在事后使用不显眼的 javascript 来完成它。有关示例，请参见http://code.google.com/p/jquery-checkbox/ 。

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

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

于 2008-09-22T03:54:03.330 回答
6

我认为使 CheckBox 看起来真正不同的最佳方法是根本不使用复选框控件。更好地使用您自己的图像在超链接或图像元素的顶部进行选中/未选中状态。干杯。

于 2008-09-22T02:41:23.927 回答
3

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

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

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

于 2010-04-12T14:08:19.367 回答
3

在使用 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>

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

于 2016-05-25T22:48:25.043 回答
3

将此代码粘贴到您的 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;
    }
于 2018-02-27T19:14:29.267 回答
2

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

于 2010-07-15T15:23:36.507 回答
1

不确定这真的是一个与 asp.net 相关的问题.. 试一试，这里有很多很好的信息：

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

于 2008-09-22T02:27:13.103 回答
1

请记住，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 */
}
于 2008-09-22T02:34:55.767 回答
0

他们真的依赖于浏览器。

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

于 2008-09-22T02:32:26.007 回答
0

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

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;
}
于 2020-11-13T17:43:36.587 回答