Вопрос по checkbox, css, asp.net – Изменить стиль / внешний вид Asp: CheckBox с помощью CSS

9

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

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

Ваш Ответ

9   ответов
13

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

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

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

1

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

   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;
    }
Это было просто и отлично работало!
2

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

Ваше предложение сработало для меня. Следовал этому примеру.ajaxcontroltoolkit.net/ToggleButton/ToggleButton.aspx
2

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

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

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

Результат выглядит так ...
The result looks like this

1

Имейте в виду, что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 */
}
6

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

В значительной степени вывод, который я также сделал! JamesSugrue
Удобство и простота использования, оооочень в прошлом году ... :(
3

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

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

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

0

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

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

1

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

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

Похожие вопросы