Изменить стиль / внешний вид Asp: CheckBox с помощью CSS

Не уверен, что это действительно вопрос, связанный с asp.net. Попробуйте, здесь много полезной информации:

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

Они действительно зависят от браузера.

Возможно, вы могли бы сделать что-то похожее на ответ на вопрос это об изменении кнопки просмотра файлов.

Имейте в виду, что элемент управления asp: CheckBox фактически выводит больше, чем просто ввод одного флажка.

Например, мой код выводит

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

где CheckBoxStyle - значение атрибута CssClass, примененного к элементу управления, а cbCheckBox - идентификатор элемента управления.

Чтобы стилизовать ввод, вам нужно написать CSS для target

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

Я думаю, что лучший способ сделать так, чтобы CheckBox выглядел по-другому, - это вообще не использовать элемент управления флажком. Лучше использовать свои собственные изображения для отмеченного / снятого состояния поверх гиперссылки или элемента изображения. Ваше здоровье.

Вместо того, чтобы использовать какие-то нестандартные элементы управления, вам следует использовать ненавязчивый javascript, чтобы сделать это постфактум. См. Пример http://code.google.com/p/jquery-checkbox/.

Использование стандартного флажка ASP упрощает написание кода. Вам не нужно писать собственный пользовательский элемент управления, и весь ваш существующий код / ​​страницы не нужно обновлять.

Что еще более важно, это стандартный элемент управления HTML, который могут распознать все браузеры. Он доступен для всех пользователей и работает, если у них нет javascript. Например, программы чтения с экрана для слепых смогут понять его как флажок, а не просто изображение со ссылкой.

Самый простой способ - использовать элемент управления флажком ASP с индивидуальным дизайном.

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

вы можете использовать что-то подобное ... надеюсь, что это поможет

Почему бы не использовать кнопку Asp.net CheckBox с ToggleButtonExtender, доступную в наборе инструментов управления Ajax.

Ничего из вышеперечисленного не работает при использовании веб-форм ASP.NET и Bootstrap.

В итоге я использовал Простой флажок начальной загрузки для веб-форм Пола Шерифа

<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>

Результат выглядит так ...

вставьте этот код в свой 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;
    }

Что ж, я перебрал все решения, которые смог найти.

Набор инструментов Ajax Control Toolkit работает, но он создает странный вывод в формате html со всеми видами промежутков и другими стилями, с которыми сложно работать.

Использование стиля css с тегами ::before для скрытия поля исходного элемента управления будет работать, но если вы поместите 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;
}