▷ Ejemplos de apuntes de clase | Actualizado marzo 2023

Checkbox personalizado en bootstrap

Llegaremos a Bootstrap en un segundo, pero aquí están los conceptos fundamentales de CSS en juego para hacer esto usted mismo. Como señala Beard of Prey, puedes hacer esto con CSS posicionando absolutamente el icono dentro del elemento de entrada. A continuación, añadir el relleno a ambos lados para que el texto no se superponga con el icono.
Como señala buffer, esto se puede lograr de forma nativa dentro de Bootstrap utilizando Estados de Validación con Iconos Opcionales. Esto se hace dando al elemento .form-group la clase .has-feedback y al icono la clase .form-control-feedback.
Para superar los contras, he elaborado este pull-request con cambios para soportar los iconos alineados a la izquierda. Como es un cambio relativamente grande, se ha pospuesto hasta una futura versión, pero si necesitas estas características hoy, aquí tienes una sencilla guía de implementación:
Como hay muchas configuraciones html posibles sobre diferentes tipos de formularios, diferentes tamaños de controles, diferentes conjuntos de iconos y diferentes visibilidades de etiquetas, he creado una página de prueba que muestra el conjunto correcto de HTML para cada permutación junto con una demostración en vivo.

Ejemplos de estilo css de casillas de verificación

Alternativamente, utilice el atributo data-width para establecer el ancho de la selección. Establezca data-width como ‘auto’ para ajustar automáticamente el ancho de la selección a su opción más ancha. Si el valor es «fit», la anchura de la selección se ajustará automáticamente a la anchura de la opción seleccionada en ese momento. También se puede especificar un valor exacto, por ejemplo, 300px o 50%.
La opción de tamaño se establece por defecto en ‘auto’. Cuando el tamaño se establece en ‘auto’, el menú siempre se abre para mostrar tantos elementos como permita la ventana sin que se corte. Establezca el tamaño en falso para mostrar siempre todos los elementos. El tamaño del menú también se puede especificar utilizando el atributo data-size.
dropupAuto se establece por defecto en true, lo que determina automáticamente si el menú debe mostrarse por encima o por debajo de la caja de selección. Si dropupAuto está establecido en false, haz manualmente que el selector sea un menú desplegable añadiendo la clase .dropup al selector.

Casilla de verificación personalizada codepen

Cabe destacar que la cuestión fundamental no ha cambiado. Todavía no se pueden aplicar estilos (bordes, etc.) directamente al elemento checkbox y hacer que esos estilos afecten a la visualización del checkbox HTML. Lo que ha cambiado, sin embargo, es que ahora es posible ocultar la casilla de verificación real y sustituirla por un elemento con estilo propio, utilizando únicamente CSS. En particular, debido a que el CSS tiene ahora un selector :checked ampliamente soportado, puedes hacer que tu reemplazo refleje correctamente el estado marcado de la casilla.
Aquí hay un artículo útil sobre el estilo de las casillas de verificación. Básicamente, ese escritor encontró que varía enormemente de un navegador a otro, y que muchos navegadores siempre muestran la casilla de verificación por defecto sin importar cómo la estilices. Así que realmente no hay una manera fácil.
Puede lograr un efecto de casilla de verificación personalizado usando las nuevas habilidades que vienen con las pseudo clases :after y :before. La ventaja de esto, es: No necesitas añadir nada más al DOM, sólo el checkbox estándar.