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

Question

Я хочу изменить стандартный «3D» вид стандартного флажка asp.net, чтобы он обозначался как 1px. Если я пытаюсь применить стиль к границе, например, он делает это - рисует стандартный флажок с рамкой вокруг него - что, я думаю, действительно.

В любом случае, есть ли способ изменить стиль текстового поля?

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

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

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

Answer 6

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

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

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

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

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

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

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

Answer 8

Не уверен, что это действительно вопрос, связанный с asp.net.

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

Answer 9

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

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