Desarrollo HTML
  1. Desarrollo HTML
  3. ¿Cómo puedo ocultar los bordes de las casillas de verificación en un control ASP.Net CheckBoxList con jQuery?

¿Cómo puedo ocultar los bordes de las casillas de verificación en un control ASP.Net CheckBoxList con jQuery?

Necesito deshacerme de los bordes alrededor de las casillas de verificación individuales que son renderizadas por un control CheckBox. Esto es lo que parece ahora:

Imagen con bordes de casilla de verificación

El marcado de ASP.Net es directo:

que está en una celda en una tabla con la clase formTable aplicada (ver a continuación).

Como puede ver, he intentado configurar los atributos BorderStyle="None" y BorderWidth="0" sin ningún efecto.

Estoy bastante seguro de que lo que hay detrás de esto es el siguiente CSS, que pone bordes de esquina redondeados alrededor de las celdas de la tabla adjunta, que quiero mantener: 

 .formTable { background-color: #eeeeee; border: solid 1px #bbbbbb; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; } .formTable tr, .formTable tr td, .formTable tr th { background-color: #eeeeee; padding: 3px; border: solid 1px #bbbbbb; vertical-align: top; }

Agregué el siguiente CSS, que tampoco hizo nada: 

 .formTable tr td input[type="checkbox"] { border: none; }

Finalmente, el HTML renderizado desde .aspx para CheckBoxList, como se ve en Chrome DevTools, se ve así (editado un poco para abreviar): 

  ...

¿Alguna sugerencia sobre cómo puedo deshacerme de las fronteras no deseadas?

ACTUALIZACIÓN : Aquí hay algunas imágenes para que quede más claro lo que está sucediendo y lo que estoy tratando de lograr:

Esto es lo que estoy obteniendo ahora:

Incorrecto: bordes alrededor de casillas de verificación individuales

Esto es lo que obtengo si uso cualquiera de las sugerencias que se han presentado hasta ahora:

Incorrecto: sin bordes alrededor de las celdas de la tabla

Esto es lo que bash lograr:

Correcto: bordes alrededor de las celdas de la tabla, pero no alrededor de las casillas de verificación dentro de

Además de las sugerencias que hice aquí, intenté agregar esto al CSS, pero no hizo diferencia: 

 .formTable tr td > input[type="checkbox"] { border: none; }

También probé esto en Javascript / jQuery: 

  $(document).ready(function() { $('.formTable tr td > input[type="checkbox"]').removeAttr("border"); });

El problema no es la input sino su td . Mira:

Aquí (arriba) se define el radio del borde. Y aquí (abajo) el color del borde: 

 .formTable tr, .formTable tr td, .formTable tr th { background-color: #eeeeee; padding: 3px; border: solid 1px #bbbbbb; vertical-align: top; }

Entonces, para cambiar esto, es posible que desee agregar justo después del código CSS anterior, esto: 

 .formTable tr td { border:0; }

Al hacer esto, harás desaparecer los bordes del td y no los bordes de tr o th

ACTUALIZAR DESPUÉS DE LAS ACLARACIONES DE OP

Oh, todo bien. Ahora con esas nuevas capturas de pantalla podemos ver bien lo que estás tratando de lograr. De todos modos, todavía estás tratando de eliminar un borde de la entrada, pero repito, el problema no es la entrada, sino que es td.

Te explicaré con el código que nos diste, ¿de acuerdo? Asi que: 

  ...

Este es el código HTML de la tabla que tiene dentro de todas esas casillas de verificación . Todos sus TD han redondeado fronteras y cosas que ya sabemos. Esta tabla que tiene dentro de todas esas casillas de verificación está dentro de un TD más grande (que fronteras quiere conservar) Estamos en la siguiente situación:

TD de mesa

Entonces ahora tienes 2 maneras de actuar sin cambiar todo tu HTML: CSS o jQuery.

El camino de CSS

Bastante simple, puede poner estilo en línea en esas celdas de la tabla (que tienen casillas de verificación adentro) como esta: style="border:0" lugar de style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;" . O simplemente crea una nueva clase de CSS como esta 

 .no-borders { border:0; }

y aplícala en cada td que no quieras ver.

La forma jQuery

Su código no lo muestra, pero aparentemente en algún momento la clase .formTable se está asignando a CheckBoxList. Simplemente elimine el border: solid 1px #bbbbbb; de la statement de segunda clase: 

 .formTable tr, .formTable tr td, .formTable tr th { background-color: #eeeeee; padding: 3px; vertical-align: top; }

Demostración: http://jsfiddle.net/pgpR3/1/

Intereting Posts
¿Cómo se muestra una moneda negativa en rojo?AngularJS $ http.get no muestra datosMarcador de mapa de Google para mostrar la ubicación en el cuadro de texto en lugar de la etiqueta div¿Por qué no se activa ASP.net RadioButtonList onchange client side event?Obtenga el valor de Label en listview¿Cómo borrar el valor de entrada de una vista desde otra vista?¿Cómo eliminar todas las tags y obtener el texto puro?C # asp.net: Cómo eliminar la etiqueta span de WebControl cuando se procesa