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

StackOverflow https://stackoverflow.com/questions/112883

  •  02-07-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

Я думаю, что лучший способ заставить 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.

В итоге я воспользовался услугами Пола Шерифа. Простой флажок 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>

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

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

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

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

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

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

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

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

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

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

На самом деле они зависят от браузера.

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top