Cambiar estilo/apariencia de Asp:CheckBox usando CSS

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

  •  02-07-2019
  •  | 
  •  

Pregunta

Quiero cambiar el aspecto estándar "3D" de la casilla de verificación estándar de asp.net para que diga 1px sólido.Si intento aplicar el estilo al borde, por ejemplo, hace precisamente eso: dibuja la casilla de verificación estándar con un borde alrededor, lo cual supongo que es válido.

De todos modos, ¿hay alguna manera de cambiar el estilo del cuadro de texto real?

¿Fue útil?

Solución

Creo que la mejor manera de hacer que CheckBox se vea realmente diferente es no utilizar ningún control de casilla de verificación.Es mejor utilizar sus propias imágenes para el estado marcado/no marcado encima del hipervínculo o elemento de imagen.Salud.

Otros consejos

En lugar de utilizar algún control no estándar, lo que debería hacer es utilizar JavaScript discreto 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 ASP estándar simplifica la escritura del código.No es necesario que escriba 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 simplemente como una imagen con un enlace.

La mejor manera más sencilla es utilizar el control de casilla de verificación ASP con diseño personalizado.

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

puedes usar algo asi..Espero que ayude

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

Ninguno de los anteriores funciona bien cuando se utilizan ASP.NET Web Forms y Bootstrap.

Terminé usando el de Paul Sheriff. Casilla de verificación Bootstrap simple 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í...
The result looks like this

No estoy seguro de que sea realmente una pregunta relacionada con asp.net.Pruébalo, hay mucha buena información aquí:

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

Tenga en cuenta que el asp: casilla de verificación El control en realidad genera más que una simple entrada de casilla de verificación.

Por ejemplo, mi código genera

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

dónde Estilo de casilla de verificación es el valor del atributo CssClass aplicado al control y cbCheckBox es el ID del control.

Para aplicar estilo a la entrada, debe escribir CSS para apuntar

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

Pegue este código en su CSS y le permitirá personalizar el estilo de su casilla de verificación.sin embargo, no es la mejor solución, prácticamente muestra su estilo encima de la casilla de verificación/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;
    }

Realmente dependen del navegador.

Tal vez podrías hacer algo similar a la respuesta en este Pregunta sobre cómo cambiar el botón de exploración de archivos.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top