Estilo de entrada da caixa de seleção CSS

Qualquer estilo para inputafeta todos os elementos de entrada. Existe uma maneira de especificar o estilo para aplicar apenas às caixas de seleção sem aplicar uma classe a cada elemento da caixa de seleção?

Com o CSS 2, você pode fazer isso:

input[type='checkbox'] { ... }

Isso deve ser amplamente suportado até agora. Veja o suporte para navegadores

Eu crio minha própria solução sem rótulo

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

Algo que descobri recentemente para criar botões de opção e caixas de seleção. Antes, eu tinha que usar jQuery e outras coisas. Mas isso é estupidamente simples.

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

Você pode fazer o mesmo em uma caixa de seleção, obviamente altere input[type=radio]para input[type=checkbox]e border-radius:15px;para border-radius:4px;.

Espero que isso seja útil para você.

As aulas também funcionam bem, como:

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

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

Você pode aplicar apenas a determinado atributo fazendo:

input[type="checkbox"] {...}

Isso explica aqui .

input[type="checkbox"] {
 /* your style */
}

Mas isso funcionará apenas para navegadores, exceto o IE7 e abaixo, para aqueles que você terá que usar uma classe.

O Trident fornece o ::-ms-checkpseudo-elemento para controles de caixa de seleção e botão de opção. Por exemplo:

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

Isso é exibido da seguinte maneira no IE10 no Windows 8:

Como o IE6 não entende os seletores de atributo, você pode combinar um script visto apenas pelo IE6 (com comentários condicionais) e pelo jQuery ou IE7.js de Dean Edwards.

O IE7 (.js) é uma biblioteca JavaScript para fazer com que o Microsoft Internet Explorer se comporte como um navegador compatível com os padrões. Ele corrige muitos problemas de HTML e CSS e faz com que o PNG transparente funcione corretamente no IE5 e IE6.

A escolha do uso de classes ou jQuery ou IE7.js depende de seus gostos e aversões e de outras necessidades (talvez a transparência PNG-24 em todo o site sem ter que confiar no PNG-8 com transparência completa, que se aplica à transparência de 1 bit no IE6 - criado apenas pelo Fireworks e pngnq, etc)

Embora o CSS forneça uma maneira de você executar o estilo específico para o tipo de caixa de seleção ou outro tipo, haverá problemas nos navegadores que não suportam isso.

Acho que sua única opção nesse caso será aplicar classes às suas caixas de seleção.

basta adicionar a classe = "caixa de seleção" às suas caixas de seleção.

Em seguida, crie esse estilo no seu código CSS.

Uma coisa que você pode fazer é:

main.css

input[type="checkbox"] { /* css code here */ }

ie.css

.checkbox{ /* css code here for ie */ }

Em seguida, use o CSS específico do IE:

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Você ainda precisará adicionar a classe para que ela funcione no IE, e não funcionará em outros navegadores que não sejam o IE que não suportam o IE. Mas isso fará com que seu site tenha uma visão de futuro com código css e, à medida que o IE obtiver suporte, você poderá remover o código css específico, isto é, e também as classes css das caixas de seleção.