asp.net - personalizar - Cambiar estilo/apariencia de Asp: CheckBox usando CSS

custom css checkbox

Question

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.

De todos modos, ¿hay alguna manera de cambiar la forma en que se diseñó el cuadro de texto real?

Answer 1

¿Por qué no usar el botón Asp.net CheckBox con ToggleButtonExtender disponible desde el kit de herramientas de control de Ajax?

Answer 2

Creo que la mejor manera de hacer que CheckBox se vea realmente diferente es no utilizar ningún control de casilla de verificación. Mejor utilice sus propias imágenes para comprobar / desmarcar el estado en la parte superior del elemento de hipervínculo o imagen. Aclamaciones.

Answer 3

Dependen del navegador realmente.

Tal vez podría hacer algo similar a la respuesta en esta pregunta sobre cómo cambiar el botón de examinar archivos.

Answer 4

En lugar de utilizar un control no estándar, lo que deberías hacer es usar javascript no molesto para hacerlo después del hecho. Consulte http://code.google.com/p/jquery-checkbox/ para obtener un ejemplo.

El uso de la casilla de verificación ASP estándar 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.

Answer 5

La mejor manera, utilizando el control de casilla de verificación ASP con diseño personalizado.

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

puedes usar algo así ... espero que ayude

Answer 6

Ninguno de los anteriores funciona bien cuando se utilizan formularios web ASP.NET y Bootstrap.

Terminé usando Simple Bootstrap CheckBox de Paul Sheriff para formularios web

<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 se ve así ...

Answer 7

No estoy seguro de que sea realmente una pregunta relacionada con asp.net. Dale una oportunidad, mucha información buena aquí:

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

Answer 8

Tenga en cuenta que el control aspCap CheckBox en realidad genera más que una sola entrada de casilla de verificación.

Por ejemplo, mi código de salidas

<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 la ID del control.

Para diseñar la entrada, debe escribir CSS para orientar

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