¿Cómo cambiar el estilo de borde de la casilla de verificación en CSS?

122

¿Cómo puedo cambiar el estilo del borde de la casilla de verificación (entrada)? Lo he puesto border:1px solid #1e5180, pero en FireFox 3.5, ¡no pasa nada!

html  css 
— Ricky
fuente

Respuestas:

63

Si algo sucede en cualquier navegador, me sorprendería. Este es uno de esos elementos de formulario sobresalientes que los navegadores tienden a no permitirle mucho estilo, y que las personas generalmente intentan reemplazar con javascript para que puedan diseñar / codificar algo para que se vea y actúe como una casilla de verificación.

— Sofía
fuente
44
Opera maneja muy bien el estilo en la casilla de verificación. IE tiene un estilo que envuelve la casilla de verificación (no en la casilla de verificación en sí).
— temor
44
En realidad son feos hoy en día: D
— Gergely Fehérvári
1
siguen siendo feos en 2020
— Paul
210

Sugiero usar "esquema" en lugar de "borde". Por ejemplo: outline: 1px solid #1e5180.

— Greg
fuente
3
El esquema es una gran alternativa.
— Nippysaurus
44
esquema es muy bueno, y funciona para todos los cuadros de entrada y selección, lo que lo hace útil para las clases ".error".
— SztupY
2
Es posible que deba agregar !importanta su CSS cuando use el esquema. Estaba probando esto en Firefox 12.0 y sin! Importante, el esquema desaparecería mientras estuviera haciendo clic en la casilla de verificación.
— Weezle
3
Esta es una gran alternativa, pero el problema del esquema es que en IE7 no funciona.
— Yises
13
@Yises ¿Tienes que preocuparte por IE7? Ay, lo siento.
— theblang
71

Deberías usar

-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;

Luego, se deshace de la imagen / estilo de casilla de verificación predeterminada y puede aplicarle un estilo. De todos modos, un borde todavía estará allí en Firefox

— Valerij
fuente
2
Opera le permite diseñar casillas de verificación sin ningún tipo de piratería adicional: dejaría de lado el estilo de apariencia. -moz-aparición y -webkit-aparición son geniales, sin embargo.
— Neall
77
Vaya - habló demasiado pronto: "-webkit-apariencia: ninguno;" parece deshabilitar el comportamiento de la casilla de verificación.
— Neall
66
para mí (cromo 5) no, necesita diseñar el: estado extra controlado
— Valerij
1
La apariencia nunca había sido parte del estándar CSS. No lo uses.
— Evgeny
wow, esto es increíble, me voy a deshacer de los complementos. puedo hacer cualquier cosa => | entrada [tipo = casilla de verificación] | input [tipo = casilla de verificación]: hover | input [tipo = casilla de verificación]: marcado | input [type = checkbox]: marcado: después de ...
— h0mayun
21

Puede usar sombras de cuadro para falsificar un borde:

-webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
— Dennis Heiden
fuente
@retrovertigo, ¿qué versión?
— Dennis Heiden
Versión 12.0.2 (14606.3.4) / más reciente en macOS 10.14
— retrovertigo
@retrovertigo He probado mi solución y tienes razón. Mi respuesta no funciona para Safari sin más modificaciones (como -webkit-Look: none;). 3 años después, usaría las soluciones dadas por pendientes Fox o Adán. Pero intentaré extender mi respuesta dentro de algunas semanas. Gracias por tus comentarios.
— Dennis Heiden
11

Aquí hay una solución de navegador cruzado CSS (sin imágenes) pura basada en casillas de verificación personalizadas de Martin y botones de radio con CSS3 LINK: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -with-css3-revisited /

Aquí hay un jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/

He probado esto en los siguientes navegadores:

  • FireFox (41.0.2) (42)
  • Google Chrome (46.0.2490.80 m)
  • Ópera (33.0.1990.43)
  • Internet Explorer (11.0.10240.16431 [Versiones de actualización: 11.0.22])
  • Microsoft Edge (20.10240.16384.0)
  • Safari Mobile iPhone iOS9 (601.1.46)

label,
input[type="radio"] + span,
input[type="radio"] + span::before,
label,
input[type="checkbox"] + span,
input[type="checkbox"] + span::before
{
    display: inline-block;
    vertical-align: middle;
}
 
label *,
label *
{
    cursor: pointer;
}
 
input[type="radio"],
input[type="checkbox"]
{
    opacity: 0;
    position: absolute;
}
 
input[type="radio"] + span,
input[type="checkbox"] + span
{
    font: normal 11px/14px Arial, Sans-serif;
    color: #333;
}
 
label:hover span::before,
label:hover span::before
{
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
}
 
label:hover span,
label:hover span
{
    color: #000;
}
 
input[type="radio"] + span::before,
input[type="checkbox"] + span::before
{
    content: "";
    width: 12px;
    height: 12px;
    margin: 0 4px 0 0;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
     
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
     
    background: #f6f6f6;
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
}
 
input[type="radio"]:checked + span::before,
input[type="checkbox"]:checked + span::before
{
    color: #666;
}
 
input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span
{
    cursor: default;
     
    -moz-opacity: .4;
    -webkit-opacity: .4;
    opacity: .4;
}
 
input[type="checkbox"] + span::before
{
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
 
input[type="radio"]:checked + span::before
{
    content: "\2022";
    font-size: 30px;
    margin-top: -1px;
}
 
input[type="checkbox"]:checked + span::before
{
    content: "\2714";
    font-size: 12px;
}



input[class="blue"] + span::before
{
    border: solid 1px blue;
    background: #B2DBFF;
    background: -moz-radial-gradient(#B2DBFF, #dfdfdf);
    background: -webkit-radial-gradient(#B2DBFF, #dfdfdf);
    background: -ms-radial-gradient(#B2DBFF, #dfdfdf);
    background: -o-radial-gradient(#B2DBFF, #dfdfdf);
    background: radial-gradient(#B2DBFF, #dfdfdf);
}
input[class="blue"]:checked + span::before
{
    color: darkblue;
}



input[class="red"] + span::before
{
    border: solid 1px red;
    background: #FF9593;
    background: -moz-radial-gradient(#FF9593, #dfdfdf);
    background: -webkit-radial-gradient(#FF9593, #dfdfdf);
    background: -ms-radial-gradient(#FF9593, #dfdfdf);
    background: -o-radial-gradient(#FF9593, #dfdfdf);
    background: radial-gradient(#FF9593, #dfdfdf);
}
input[class="red"]:checked + span::before
{
    color: darkred;
}
 <label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label>

<br/>

 <label><input type="radio" checked="checked" name="radios-02"  class="blue" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-02" class="blue" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-02" disabled="disabled" class="blue" /><span>disabled radio button</span></label>

<br/>

 <label><input type="radio" checked="checked" name="radios-03"  class="red" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-03" class="red" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-03" disabled="disabled" class="red" /><span>disabled radio button</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" class="blue" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="blue" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="blue" /><span>disabled checkbox</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" class="red" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="red" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="red" /><span>disabled checkbox</span></label>
Expandir fragmento

— Adan Rehtla
fuente
10

Estoy desactualizado, lo sé ... Pero una pequeña solución sería colocar su casilla de verificación dentro de una etiqueta y luego peinar la etiqueta con un borde:

<label class='hasborder'><input type='checkbox' /></label>

luego peina la etiqueta:

.hasborder { border:1px solid #F00; }
— Hussam
fuente
1
También tenga en cuenta que el elemento de etiqueta marcará la casilla de verificación cada vez que haga clic, incluso si la casilla de verificación no se puede ver dentro de ella. Entonces, en la etiqueta, puede hacer algo como label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }y luego label > input[type=checkbox] { position: absolute; left: -999px; }Esto le permitirá personalizar su propia casilla de verificación y la casilla de verificación original seguirá marcada / desmarcada, pero el usuario no la verá. Solo verán su casilla de verificación personalizada.
— Gavin
1
Olvidé agregar, luego puede usar selectores como :hovery :checkedpara aplicar estilo a otros estados de su casilla de verificación personalizada.
— Gavin
10

Aquí está mi versión que usa FontAwesome para el ticker de la casilla de verificación, creo que FontAwesome es utilizado por casi todos, por lo que es seguro asumir que tú también lo tienes. No probado en IE / Edge y no creo que a nadie le importe.

input[type=checkbox] {
	-moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	outline: none;
	content: none;	
}

input[type=checkbox]:before {
	font-family: "FontAwesome";
    content: "\f00c";
    font-size: 15px;
    color: transparent !important;
    background: #fef2e0;
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid black;
    margin-right: 7px;
}

input[type=checkbox]:checked:before {

	color: black !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<input type="checkbox">
Expandir fragmento

— pendiente
fuente
9

Para Firefox , Chrome y Safari , no pasa nada.

Para IE, el borde se aplica fuera de la casilla de verificación (no como parte de la casilla de verificación), y el efecto de sombreado "elegante" en la casilla de verificación desaparece (se muestra como una casilla de verificación pasada de moda).

Para Opera, el estilo de borde en realidad está aplicando el borde en el elemento de casilla de verificación.
Opera también maneja otros estilos en la casilla de verificación mejor que otros navegadores: el color se aplica como el color de la marca, el color de fondo se aplica como color de fondo dentro de la casilla de verificación (IE aplica el fondo como si la casilla de verificación estuviera dentro de un <div>fondo) .

Conclusión

La solución más fácil es envolver la casilla de verificación dentro de lo <div>que otros han sugerido.
Si desea controlar completamente la apariencia, tendrá que optar por el enfoque avanzado de imagen / javascript, también indicado por otros.

— temor
fuente
2
+1 para investigación, pero envolverlo dentro de un div no es una solución. No le permite diseñar la casilla de verificación, le permite diseñar alrededor de la casilla de verificación, a menos que comience a jugar tratando de ocultarla y pintar sobre ella, lo que tendrá sus propios problemas.
Bueno, el único navegador que le permite diseñar la casilla de verificación en sí es Opera. Envolverlo dentro de un div es una solución que puede ser lo suficientemente buena, pero que realmente depende de lo que desee. ¡IE en realidad actúa como si lo pusieras en un div si intentas darle estilo a la casilla de verificación!
— asombro
7

Las casillas de verificación de estilo (y muchos otros elementos de entrada para esa materia) no son realmente posibles con CSS puro si desea cambiar drásticamente la apariencia visual.

Su mejor opción es implementar algo como lo hace jqTransform que realmente reemplaza sus entradas con imágenes y aplica el comportamiento de JavaScript para imitar una casilla de verificación (u otro elemento para el caso)

— ChrisR
fuente
4

No, aún no puede diseñar la casilla de verificación en sí, pero (finalmente) descubrí cómo diseñar una ilusión manteniendo la funcionalidad de hacer clic en una casilla de verificación. ¡Significa que puede alternarlo incluso si el cursor no está perfectamente quieto sin arriesgarse a seleccionar texto o activar arrastrar y soltar!

El ejemplo es usar un "botón" de extensión, así como algo de texto en una etiqueta, pero le da la idea de cómo puede hacer que la casilla de verificación sea invisible y dibujar cualquier cosa detrás de ella.

Esta solución probablemente también se ajuste a los botones de opción.

Lo siguiente funciona en IE9, FF30.0 y Chrome 40.0.2214.91 y es solo un ejemplo básico. Todavía puede usarlo en combinación con imágenes de fondo y pseudoelementos.

http://jsfiddle.net/o0xo13yL/1/

label {
    display: inline-block;
    position: relative; /* needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* make it transparent */
    z-index: 666; /* place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>
— LGT
fuente
2

Aquí hay una manera simple (para usar antes o después de pseudo elementos / clases):

input[type=checkbox] {
    position: relative;
}

input[type=checkbox]:after {
    position: absolute;
    top: 0;
    left: 0;
    /* Above three lines allow the checkbox:after position at checkbox's position */
    content: '';
    width: 32px;
    height: 32px;
    z-index: 1; /* This allows the after overlap the checkbox */
    /* Anything you want */
}
— Alex Fang
fuente
Creo que esta es una forma inteligente de cambiar el estilo de su casilla de verificación y algo así.
— Alex Fang
1
No funciona en Firefox e IE. Más importante aún, es una implementación incorrecta de Chrome, porque los elementos vacíos NO pueden tener ningún contenido.
— Leo
Leo, estás malinterpretando el término "contenido", todo lo que dice es que esos elementos vacíos no pueden tener contenido intermedio porque no hay una etiqueta de cierre. por ejemplo, <a> contenido </a> tiene una etiqueta de cierre, por lo que puede haber un contenido entre esas etiquetas. pero input no tiene la etiqueta de cierre, por lo que no puede tener el contenido por principio. Por otro lado, los pseudo-elementos tienen una propiedad llamada "contenido" que se puede usar en todas partes.
— pendiente
-1 

<!DOCTYPE html>
<html>
<head>
<style> 

.abc123
{
	-webkit-appearance:none;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: #FFFFFF;
	border: 1px solid rgba(220,220,225,1);
}
.abc123:after {
  content: "";
  display: inline-block;
  position: relative;
  top: -3px;
  left: 4px;
  width: 3px;
  height: 5px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
}

input[type=checkbox]:checked   {
    background: #327DFF;
    outline: none;
    border: 1px solid rgba(50,125,255,1);
}
input:focus,input:active {
	outline: none;
}

input:hover {
   border: 1px solid rgba(50,125,255,1);
}

</style>
</head>
<body>

<input class="abc123" type="checkbox"></input>


</body>
</html>
Expandir fragmento

— KeepLearn
fuente
Primero: ": después" crear √; Segundo: "-webkit-apariencia: ninguno" dejó que el estilo original no pudiera funcionar, y luego puede definir su estilo.
— KeepLearn
2
Por favor escriba una breve descripción sobre su respuesta.
— Angel F Syrus
-5

ponlo en un div y agrega un borde al div

— Midhat
fuente
55
Entonces tendrás un doble borde.
— Egor Pavlikhin
<div style = "border-style: solid; width: 120px;"> <input type = "checkbox" name = "mycheck"> Mi casilla de verificación </input> </div> funciona bien con htmlsandbox
— Midhat
8
Definir "funciona bien". Por ejemplo, nunca he visto una casilla de verificación de 120 px de ancho.
-8 
<div style="border-style: solid;width:13px"> 
   <input type="checkbox" name="mycheck" style="margin:0;padding:0;">
   </input> 
</div>
— Midhat
fuente
77
@lexu No hay tal cosa como </input>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.