Измените стиль/внешний вид Asp:CheckBox с помощью CSS
Вопрос
Я хочу изменить стандартный «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>
Не уверен, что это действительно вопрос, связанный с 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;
}
На самом деле они зависят от браузера.
Возможно, вы могли бы сделать что-то похожее на ответ в этот вопрос по изменению кнопки просмотра файлов.