Quiero cambiar el aspecto estándar "3D" de la casilla de verificación asp.net estándar para decir sólido 1px. Si trato de aplicar el estilo al borde, por ejemplo, simplemente hace eso, dibuja la casilla de verificación estándar con un borde alrededor, lo cual es válido, supongo.Cambiar el estilo/aspecto de Asp: CheckBox usando CSS
De todos modos, ¿hay alguna manera de cambiar la forma en que está diseñado el cuadro de texto?
Creo que la mejor manera de hacer CheckBox se ve muy diferente es no utilizar el control de casilla de verificación en absoluto. Mejor utilice sus propias imágenes para verificar/desmarcar el estado en la parte superior del hipervínculo o elemento de imagen. Aclamaciones.
No estoy seguro de que es realmente una cuestión relacionada con asp.net .. dar a este un tiro, un montón de buena información aquí:
http://www.456bereastreet.com/archive/200409/styling_form_controls/
Son depende del navegador realmente.
Tal vez podría hacer algo similar a la respuesta en this pregunta sobre cómo cambiar el botón de examinar archivos.
Tenga en cuenta que el control asp: CheckBox realmente emite más que una sola entrada de casilla de verificación.
Por ejemplo, mis salidas de código
<span class="CheckBoxStyle">
<input id="ctl00_cphContent_cbCheckBox"
name="ctl00$cphContent$cbCheckBox"
type="checkbox">
</span>
donde CheckBoxStyle es el valor del atributo CssClass aplicado al control y cbCheckBox es el ID del control.
Para el estilo de la entrada, es necesario escribir CSS para apuntar
span.CheckBox input {
/* Styles here */
}
En lugar de utilizar un control no estándar, lo que debe hacer es utilizar javascript no molesto para hacerlo después del hecho. Ver http://code.google.com/p/jquery-checkbox/ para un ejemplo.
El uso de la casilla de verificación estándar de ASP simplifica la escritura del código. No tiene que escribir su propio control de usuario, y no es necesario actualizar todos sus códigos/páginas existentes.
Más importante aún, es un control HTML estándar que todos los navegadores pueden reconocer. Es accesible para todos los usuarios y funciona si no tienen javascript. Por ejemplo, los lectores de pantalla para ciegos podrán entenderlo como un control de casilla de verificación, y no solo como una imagen con un enlace.
La mejor manera, utilizando el control de casilla de verificación ASP con diseño personalizado.
chkOrder.InputAttributes["class"] = "fancyCssClass";
se puede usar algo como eso .. espero que ayude
Por qué no usar el botón Asp.net casilla de verificación con ToggleButtonExtender disponible en el kit de herramientas de control de Ajax.
Ninguno de los anteriores funciona bien cuando se utilizan formularios web de ASP.NET y Bootstrap.
Terminé usando de Paul Sheriff Simple Bootstrap CheckBox for Web Forms
<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>
El resultado es idéntico al ...
pega este código en su css y que le permitirá personalizar el estilo de casilla de verificación. sin embargo, no es la mejor solución, es más o menos mostrar su estilo sobre el casillero/botón de radio existente.
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;
}
¡Casi la conclusión que se me ocurrió también! – JamesSugrue
Usabilidad y mejora progresiva, eso es tan ... el año pasado ... :( – ANeves