Como alinhar caixas de seleção e seus rótulos de forma consistente em vários navegadores


1733

Este é um dos pequenos problemas de CSS que me atormenta constantemente. Como as pessoas em torno do Stack Overflow se alinham verticalmente checkboxese seus navegadoreslabels constantemente ? Sempre que eu os alinhar corretamente no Safari (geralmente usando no ), eles estão completamente desativados no Firefox e no IE. Corrija-o no Firefox e o Safari e o IE estão inevitavelmente bagunçados. Eu perco tempo com isso toda vez que codifico um formulário.vertical-align: baselineinput

Aqui está o código padrão com o qual trabalho:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

Eu geralmente uso a redefinição de Eric Meyer, portanto, os elementos do formulário são relativamente limpos de substituições. Ansioso por dicas ou truques que você tem para oferecer!


7
Coloque cada caixa de seleção e etiqueta dentro de um elemento <li>. Adicionar estouro: oculto para <li> e flutue o rótulo e a caixa de seleção à esquerda. Então todos eles se alinham perfeitamente bem. Não coloque a caixa de seleção dentro do elemento label, obviamente.
volume um

5
Eu consegui usando heighte line-heightatributos, dê uma olhada em jsfiddle.net/wepw5o57/3
TheGr8_Nik

Manipulação com positione topresolverá esse problema Exemplo: jsfiddle.net/ynkjc22s
Profesor08

2019. ainda o mesmo problema. ainda precisa de alguns hacks para obtê-lo trabalho :(
dieter

@dieter ver a minha resposta, eu já explicou por hacks são necessários e qual a abordagem não é hacky: stackoverflow.com/a/56558431/3995261
YakovL

Respostas:


1010

Depois de mais de uma hora ajustando, testando e tentando diferentes estilos de marcação, acho que posso ter uma solução decente. Os requisitos para este projeto em particular foram:

  1. As entradas devem estar em sua própria linha.
  2. As entradas da caixa de seleção precisam alinhar verticalmente com o texto do rótulo de maneira semelhante (se não idêntica) em todos os navegadores.
  3. Se o texto do rótulo for agrupado, ele precisará ser recuado (para que não ocorra embaixo da caixa de seleção).

Antes de entrar em qualquer explicação, darei o código a você:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Aqui está o exemplo de trabalho no JSFiddle .

Este código pressupõe que você esteja usando uma redefinição como a de Eric Meyer, que não substitua as margens e o preenchimento do formulário (colocando as redefinições de margem e preenchimento no CSS de entrada). Obviamente, em um ambiente ao vivo, você provavelmente estará aninhando / substituindo coisas para apoiar outros elementos de entrada, mas eu queria manter as coisas simples.

Coisas a serem observadas:

  • A *overflowdeclaração é um hack do IE em linha (o hack da propriedade em estrela). Tanto o IE 6 quanto o 7 notarão, mas o Safari e o Firefox o ignorarão adequadamente. Eu acho que pode ser CSS válido, mas você ainda está melhor com comentários condicionais; apenas usei por simplicidade.
  • O melhor que posso dizer é que a única vertical-aligndeclaração consistente entre os navegadores foi vertical-align: bottom. A configuração e o posicionamento relativamente ascendente se comportaram quase de maneira idêntica no Safari, Firefox e IE, com apenas um ou dois pixels de discrepância.
  • O principal problema ao trabalhar com o alinhamento é que o IE ocupa um monte de espaço misterioso em torno dos elementos de entrada. Não é preenchimento ou margem, e é malditamente persistente. Definir uma largura e altura na caixa de seleção e, overflow: hiddenpor algum motivo, corta o espaço extra e permite que o posicionamento do IE atue de maneira muito semelhante ao Safari e Firefox.
  • Dependendo do tamanho do texto, você sem dúvida precisará ajustar o posicionamento relativo, a largura, a altura e assim por diante para fazer com que as coisas pareçam corretas.

Espero que isso ajude alguém! Eu não tentei essa técnica específica em nenhum projeto além daquele em que estava trabalhando hoje de manhã, então, definitivamente, se você encontrar algo que funcione de forma mais consistente.


8
Nota. Você provavelmente deve colocar um atributo "for" no seu rótulo para garantir que ele funcione para todos os navegadores e leitores de texto. (Eu sei que você provavelmente deixou-o para simplificar)
Armstrongest

306
Que pena, eu não tinha percebido quantas pessoas ignoravam isso: se você estiver inserindo a entrada na etiqueta label, o atributo "for" será desnecessário. Fique à vontade para ver por si mesmo: w3.org/TR/html401/interact/forms.html#h-17.9.1
One Crayon

10
Não concordo com a sugestão sobre o uso de comentários condicionais. Mantenha o hack CSS * foobar. Isso funciona bem, é usado por estruturas como YUI e permite manter juntos o que pertence.
ebruchez

50
Tentou acessar este está fora no Chrome 28, Mac OSX, e a caixa de seleção é visivelmente menor do que o texto
MusikAnimal

9
Observe que isso não parece funcionar nas versões mais recentes do Chrome (estou usando a v36). i.imgur.com/y9Ffxsh.png Edit: nem Firefox (v31)
Hans

214

Às vezes, o alinhamento vertical precisa de dois elementos em linha (extensão, etiqueta, entrada, etc ...) próximos um do outro para funcionar corretamente. As caixas de seleção a seguir estão centralizadas verticalmente corretamente no IE, Safari, FF e Chrome, mesmo se o tamanho do texto for muito pequeno ou grande.

Todos flutuam um ao lado do outro na mesma linha, mas o agorarap significa que todo o texto do rótulo sempre fica ao lado da caixa de seleção.

A desvantagem são as tags SPAN extras sem sentido.

.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

Agora, se você tivesse um texto de rótulo muito longo que precisasse quebrar sem quebrar sob a caixa de seleção, usaria preenchimento e recuo de texto negativo nos elementos do rótulo:

.checkboxes label {
  display: block;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}
<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>


19
Obrigado! O "vertical-align: middle" na entrada e no intervalo funcionou muito bem para mim.
William Gross

6
display: block; float: left;parece ser redundante
PHPst

4
Você não precisa usar um atributo for quando tiver a entrada dentro do rótulo. Funciona sem ele.
Tommy Sørensen

6
Esta deve ser a resposta aceita pela minha opinião. Não há ajustes necessários.
Tim

4
Impressionante e confirmado ainda funciona no Chrome 58 (Windows) (ao contrário da atual resposta superior).
Jason C

188

Trabalhando com a solução de One Crayon , tenho algo que funciona para mim e é mais simples:

.font2 {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] { 
  bottom: 2px; 
} 
<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Renderiza pixel por pixel o mesmo no Safari (cuja linha de base eu confio) e o Firefox e o IE7 são bons. Também funciona para vários tamanhos de fonte de etiqueta, grandes e pequenos. Agora, para fixar a linha de base do IE nas seleções e entradas ...


Atualização: (Edição de terceiros)

A bottomposição correta depende da família e do tamanho da fonte! Descobri que usar elementos bottom: .08em;de caixa de seleção e rádio é um bom valor geral. Eu testei no Chrome / Firefox / IE11 no Windows com fontes Arial e Calibri usando vários tamanhos de fonte pequenos / médios / grandes.

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}
<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>


10
Apenas uma observação para outras pessoas: isso não funcionará no IE6 porque não suporta a segmentação CSS [type = checkbox].
One Crayon

3
Você pode simplesmente adicionar uma classe em vez de usar seletores não suportados se o suporte ao IE6 for necessário.
precisa saber é o seguinte

1
Este funcionou para mim. No entanto, em vez de definir "posição: relativa; inferior: 1px", você pode usar "margem: 0 0 1px 0" para obter o mesmo resultado.
28417 newman

142

Uma coisa fácil que parece funcionar bem é aplicar um ajuste na posição vertical da caixa de seleção com alinhamento vertical. Ainda haverá variações entre os navegadores, mas a solução é simples.

input {
    vertical-align: -2px;
}

Referência


9
Essa foi a menor alteração entre todas as outras, que funciona para mim nas versões mais recentes dos navegadores.
Johnny_D

6
Isso funciona ainda melhor do que com vertical-aligne position: relativeporque ele também está trabalhando no IE9 corretamente :)
Dennis98

5
mas isso depende do tamanho da fonte. para tamanhos de fonte grandes, ele deve ser ajustado para valores negativos mais altos, por exemplo: alinhamento vertical: -6px;
S.Serpooshan

1
presumivelmente, isso pode funcionar melhor com fontes diferentes se estiver definida emem
YakovL

92

tentar vertical-align: middle

também seu código parece que deveria ser:

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>


<label for="blah">só é necessário se você estiver usando algo em que não faz sentido o rótulo quebrar (como uma caixa de texto; geralmente usarei <label for="blah">Foo</label><input id="blah" type="text" />nesse caso). Nas caixas de seleção, acho que é menos marcação para envolvê-lo.
1 Crayon

13
Não é exatamente verdade: o Label-for permitirá que os usuários cliquem no rótulo para marcar a caixa de seleção, além de simplesmente clicar na própria caixa de seleção. É bastante útil para amarrar os dois elementos.
EndangeredMassa

26
Se uma entrada estiver aninhada dentro de um rótulo, clique no rótulo com ativar / dar foco à entrada; o atributo for é exclusivamente para o caso em que a entrada não está aninhada.
1 Crayon

3
Isso é verdade Um Crayon, mas ainda é boa prática para usar o atributo "for", ou você terá problemas com alguns navegadores que não reconhecem esta sintaxe tosse IE.
Armstrongest

se você não quer que seu caixa de seleção para ter um ID, então você precisa para quebrar a caixa de seleção dentro do rótulo
Simon_Weaver

39

Experimente a minha solução, tentei no IE 6, FF2 e Chrome e renderiza pixel por pixel nos três navegadores.

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}
<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>


3
Interessante; Eu gosto da idéia de flutuar os dois elementos; que corrige elegantemente o problema de embalagem. Eu estou ligado a embalar entrada com rótulo, mas que o código é um pedaço de um muito mais limpo do que a solução cheguei ao.
1 Crayon

Neste exemplo, a entrada de caixa e a etiqueta deve ser também têm propriedades de exibição: bloco e em tal caso eles serão tratados como de DIV normais que podem ser facilmente alinhadas
se_pavel

5
isso tem um problema, o que acontece se o rótulo não couber no espaço disponível? o rótulo e a caixa de seleção são separados (a caixa de seleção está no canto superior direito e o rótulo no canto inferior esquerdo). Se você quebrar a caixa de seleção dentro do rótulo, não terá esse problema.
18711 Enrique

Não funcionou no pixel, mas foi decente o suficiente para melhorar a aparência dos três principais navegadores. Acho que eu poderia ter passado mais uma hora para ver que ele iria trabalhar melhor ...
Alexis Wilke

26

A única solução perfeitamente funcional para mim é:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

Testado hoje em Chrome, Firefox, Opera, IE 7 e 8. Exemplo: Fiddle


22

Eu não testei completamente minha solução, mas parece funcionar muito bem.

Meu HTML é simplesmente:

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

Em seguida, defino todas as caixas de seleção 24pxpara altura e largura. Para tornar o texto alinhado eu faço a etiqueta é line-heighttambém 24pxe atribuirvertical-align: top; assim:

EDIT: Após o teste do IE, adicionei vertical-align: bottom;à entrada e alterei o CSS do rótulo. Você pode achar que precisa de um caso condicional do IE css para classificar o preenchimento - mas o texto e a caixa estão alinhados.

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}
<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

Se alguém achar que isso não funciona, entre em contato. Aqui está em ação (no Chrome e no IE - desculpas por capturas de tela na retina e usando paralelos no IE):

captura de tela das caixas de seleção: Chrome captura de tela das caixas de seleção: IE


1
Isso é bastante antigo, mas, como você pediu para informar, isso não funciona bem no FireFox (as caixas de seleção estão acima da linha de base). Você pode estar interessado em uma explicação detalhada que eu postei
YakovL

20

Eu costumo usar a altura da linha para ajustar a posição vertical do meu texto estático:

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Espero que ajude.


altura da linha, duh. Sempre esqueça esse. Bom trabalho, funciona muito bem.
Craig

13

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

O truque é usar o alinhamento vertical apenas nas células da tabela ou o bloco embutido se estiver usando a etiqueta label.


11

Vamos finalmente dar uma olhada na fonte do problema

As caixas de seleção são renderizadas usando imagens (é possível definir as personalizadas via CSS). Aqui está uma caixa de seleção (desmarcada) no FireFox, destacada com o inspetor DOM:

é apenas um quadrado

E aqui está a mesma caixa de seleção não estilizada no Chrome:

é um quadrado sem centro com "margens" à direita e na parte inferior

Você pode ver a margem (laranja); estofamento não está presente (seria mostrado em verde). Então, qual é essa pseudo-margem à direita e na parte inferior da caixa de seleção? Essas são partes da imagem usada para a caixa de seleção . É por isso que usar simplesmente vertical-align: middlenão é suficiente e essa é a fonte dos problemas entre navegadores.

Então o que podemos fazer sobre isso?

Uma opção óbvia é - substitua as imagens! Felizmente, é possível fazer isso via CSS e substituí-lo por imagens externas, imagens base64 (em CSS), svg em CSS ou apenas pseudoelementos. É uma abordagem robusta (entre navegadores!), E aqui está um exemplo de tal ajuste roubado desta pergunta :

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}
<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

Você pode ler alguns artigos mais detalhados sobre esse estilo, como alguns listados aqui ; está fora do escopo desta resposta.

Ok, ainda e quanto à solução sem imagens personalizadas ou pseudo-elementos?

TL; DR: parece que isso não vai funcionar, use a caixa de seleção personalizada

Primeiro, vamos observar que, em outros navegadores, essas pseudo-margens dentro do ícone da caixa de seleção eram arbitrárias, não havia solução consistente. Para criar uma, precisamos explorar a anatomia de tais imagens nos navegadores existentes.

Então, quais navegadores têm as pseudo-margens nas caixas de seleção? Eu verifiquei o Chrome 75, Vivaldi 2.5 (baseado em cromo), FireFox 54 (não pergunte por que está desatualizado), IE 11, Edge 42, Safari? (emprestou um por um minuto, esqueceu de verificar a versão). Somente o Chrome e o Vivaldi têm essas pseudo-margens (suspeito que todos os navegadores baseados no Chromium também, como o Opera).

Qual é o tamanho dessas pseudo-margens? Para descobrir isso, pode-se usar uma caixa de seleção ampliada:

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}
<input type=checkbox>

meu resultado é ~ 7% da largura / altura e, portanto, 0,9-1,0px em unidades absolutas. A precisão pode ser questionada: tente valores diferentes de zoompara a caixa de seleção. Nos meus testes no Chrome e no Vivaldi, o tamanho relativo da pseudo-margem é muito diferente nos zoomvalores 10, 20 e 11-19 (??):

para zoom = 10 é 7% enquanto para zoom = 11 é quase o dobro desse valor

scale parece ser mais consistente:

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}
<input type=checkbox>

então provavelmente ~ 14% e 2px são os valores corretos.

Agora que sabemos (?) O tamanho da pseudo-margem, vamos observar que isso não é suficiente. Os tamanhos dos ícones da caixa de seleção são iguais para todos os navegadores? Ai! Aqui está o que o inspetor DOM mostra para caixas de seleção sem estilo:

  • FireFox: 13.3px
  • Baseado em cromo: 12,8px para a coisa toda, portanto, 12,8 (100% - 14%) = 11px para o que é visualmente percebido como caixa de seleção
  • IE 11, Borda: 13px
  • Safari: n / a (acho que deve ser comparado na mesma tela)

Agora, antes de discutirmos quaisquer soluções ou truques, vamos perguntar: o que é um correto alinhamento ? O que estamos tentando alcançar? Até certo ponto, é uma questão de gosto, mas basicamente posso pensar nos seguintes aspectos "agradáveis" dos alinhamentos:

texto e caixa de seleção na mesma linha de base (deliberadamente não ajusto o tamanho da caixa de seleção aqui):

insira a descrição da imagem aqui

ou tem a mesma linha do meio em termos de letras minúsculas:

insira a descrição da imagem aqui

ou a mesma linha do meio em termos de letras maiúsculas (é mais fácil ver a diferença para diferentes tamanhos de fonte):

insira a descrição da imagem aqui

e também temos que decidir se o tamanho da caixa de seleção deve ser igual à altura de uma letra minúscula, maiúscula ou outra coisa (maior, menor ou entre minúscula e maiúscula).

Para esta discussão, vamos chamar um alinhamento de bom se a caixa de seleção estiver na mesma linha de base que o texto e tiver o tamanho de uma letra maiúscula (uma escolha altamente discutível):

insira a descrição da imagem aqui

Agora, quais ferramentas precisamos:

  1. ajustar o tamanho da caixa de seleção
  2. reconhecer o Chromium com sua caixa de seleção com margens pseudo-marginadas e definir estilos específicos
  3. ajustar o alinhamento vertical da caixa de seleção / etiqueta

?

  1. Em relação ao ajuste do tamanho caixa : há width, height, size, zoom, scale(eu perdi alguma coisa?). zoome scalenão permitem definir o tamanho absoluto; portanto, eles podem ajudar apenas no ajuste do tamanho do texto, não no tamanho entre navegadores (a menos que possamos escrever regras específicas do navegador). sizenão funciona com o Chrome (funcionou com o IE antigo? de qualquer maneira, não é tão interessante). widthe heighttrabalhar no Chrome e em outros navegadores, para que possamos definir um tamanho comum, mas, novamente, no Chrome, ele define o tamanho de toda a imagem, não a própria caixa de seleção. Nota: é o mínimo (largura, altura) que define o tamanho de uma caixa de seleção (se largura ≠ altura, a área fora do quadrado da caixa de seleção é adicionada à "pseudo-margem").

    Uma coisa lamentável é que as pseudo-margens na caixa de seleção do Chrome não estão definidas como zero para qualquer largura e altura, tanto quanto eu posso ver.

  2. Receio que não exista um método somente CSS confiável hoje em dia.

  3. Vamos considerar o alinhamento vertical. vertical-alignNão é possível obter resultados consistentes quando definido como middleou baselinepor causa da pseudo-margem do Chrome, a única opção real para obter o mesmo "sistema de coordenadas" para todos os navegadores é alinhar o rótulo e a entrada para top:

    comparando o alinhamento vertical: superior e inferior

    (na imagem: alinhamento vertical: superior, inferior e inferior sem sombra de caixa)

Então, que resultado obtemos disso?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}
<label><input type="checkbox">label</label>

O snippet acima funciona com o Chrome (navegadores baseados no Chromium), mas outros navegadores exigem um tamanho menor da caixa de seleção. Parece ser impossível ajustar o tamanho e o alinhamento vertical de maneira a contornar a peculiaridade da imagem da caixa de seleção do Chromium. Minha sugestão final é: use caixas de seleção personalizadas - e você evitará frustrações :)


Esta resposta é tão profunda!
Marecky 13/01

10

Agora que o flexbox é suportado em todos os navegadores modernos, algo assim parece uma abordagem mais fácil para mim.

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>


Aqui está a demonstração completa da versão com prefixo:


10

Eu acho que essa é a maneira mais fácil

input {
    position: relative;
    top: 1px;
}
<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>


a questão é: funciona bem em todos os navegadores? ;-)
JonSnow 29/04

9

Eu não gosto de posicionamento relativo porque faz com que o elemento seja renderizado acima de tudo em seu nível (ele pode ficar por cima de algo se você tiver um layout complexo).

Descobri que vertical-align: subas caixas de seleção parecem boas o suficiente alinhadas no Chrome, Firefox e Opera. Não é possível verificar o Safari, pois não tenho o MacOS e o IE10 está um pouco desligado, mas achei que era uma solução boa o suficiente para mim.

Outra solução pode ser tentar criar CSS específico para cada navegador e ajustá-lo com algum alinhamento vertical em% / pixels / EMs: http://css-tricks.com/snippets/css/browser-specific-hacks/


Parece funcionar, desde que o tamanho da fonte não seja muito grande.
robsch 27/09/18

9

Isto funciona bem para mim:

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}
<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>


8
abençoe você por usar ems em vez de pxs.
IDisposable

7

A resposta escolhida com mais de 400 upvotes não funcionou para mim no Chrome 28 OSX, provavelmente porque não foi testada no OSX ou porque funcionou no que havia em 2008 quando a pergunta foi respondida.

Os tempos mudaram e novas soluções CSS3 agora são viáveis. Minha solução usa pseudoelementos para criar uma caixa de seleção personalizada . Portanto, as estipulações (prós ou contras, por mais que você as veja) são as seguintes:

  • Funciona apenas em navegadores modernos (FF3.6 +, IE9 +, Chrome, Safari)
  • Confia em uma caixa de seleção personalizada, que será renderizada exatamente da mesma forma em todos os navegadores / sistemas operacionais. Aqui, eu acabei de escolher algumas cores simples, mas você sempre pode adicionar gradientes lineares e assim dar mais estrondo.
  • É voltado para um determinado tamanho de fonte / fonte, que, se alterado, você simplesmente altera o posicionamento e o tamanho da caixa de seleção para que ela pareça alinhada verticalmente. Se ajustado corretamente, o resultado final ainda deve ser quase o mesmo em todos os navegadores / sistemas operacionais.
  • Sem propriedades de alinhamento vertical, sem flutuadores
  • Deve usar a marcação fornecida no meu exemplo, ela não funcionará se estruturada como a pergunta, no entanto, o layout será essencialmente o mesmo. Se você quiser mudar as coisas, também precisará mover o CSS associado

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}
<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

Esta solução oculta a caixa de seleção e adiciona e estiliza pseudoelementos ao rótulo para criar a caixa de seleção visível. Como o rótulo está vinculado à caixa de seleção oculta, o campo de entrada ainda será atualizado e o valor será enviado com o formulário.

E se você estiver interessado, aqui está minha opinião sobre os botões de opção: http://jsfiddle.net/DtKrV/2/

Espero que alguém ache isso útil!


6

Eu nunca tive um problema em fazer isso assim:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

4
Como eu disse nos pôsteres anteriores, que recomendaram: Não gosto porque exige marcação desnecessária. Além disso, tentei essa marcação, mas era difícil impedir que o rótulo fosse colocado embaixo da entrada (enquanto ainda havia um grupo de rótulo / entrada em suas próprias linhas).
1 Crayon

7
Então, em vez da marcação "desnecessária" (usada provavelmente por quase todos), você prefere ter CSS desnecessário?
Robert C. Barth

10
O problema de embalar os suportes. Mas, em geral, sim, eu prefiro ter CSS estranho do que marcação, já que o CSS é armazenado em cache, mas a marcação pode ter que ser carregada novamente para cada nova página.
1 Crayon

4
Compare: 1 instância de CSS extra -vs- muitas instâncias de marcação extra.
Greg

6

Se você usa o ASP.NET Web Forms , não precisa se preocupar com DIVs e outros elementos ou tamanhos fixos. Podemos alinhar o<asp:CheckBoxList> texto, definindo float:lefto tipo de entrada CheckboxList em CSS.

Verifique o seguinte código de exemplo:

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

Código .ASPX:

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

3

Se você estiver usando o Twitter Bootstrap, basta usar a checkboxclasse no <label>:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

3

Com uma caixa de seleção do tipo de entrada enrolada dentro da etiqueta e flutuada para a esquerda, da seguinte forma:

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

isso funcionou para mim:

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

Verifique se a altura do é idêntica à altura da linha do (nível do bloco).


3

Codifique a altura e a largura da caixa de seleção, remova seu preenchimento e torne sua altura mais as margens verticais iguais à altura da linha da etiqueta. Se o texto do rótulo estiver embutido, faça flutuar a caixa de seleção. Firefox, Chrome e IE7 + todos processam o seguinte exemplo de forma idêntica: http://www.kornea.com/css-checkbox-align


Agradável! Mas você deve copiar o código HTML e CSS aqui. As respostas que dependem muito de um link externo são desencorajadas. O link ainda é valioso para ver os resultados, mas acho que mostrar o código aqui ajudará você a obter mais votos.
Mariano Desanze 8/08

Não, eles não (compare no Firefox e no Chrome, no Chrome as caixas estão acima da linha de base), expliquei por que
YakovL

Por que você reivindica o que não é suportado, mesmo com as capturas de tela dos dois navegadores. É seu trabalho fornecer provas de uma reclamação quando você faz uma, e não a de outras pessoas, para refutá-la. Eu os comparava e adicionava as capturas de tela, mas os comentários não suportam a adição de imagens; você pode dar uma olhada nas fotos na minha resposta. No entanto, isso pode diferir das versões do navegador, portanto, seria útil fornecer capturas de tela com anotações contendo versões do navegador.
YakovL

Visite a página que eu vinculei em diferentes navegadores.
Vladimir Kornea 27/10/19

Então eu fiz isso, você fez? :) Você não vê a diferença? imagebin.ca/v/50stCZZGl7Ug imagebin.ca/v/50stNBiv29Ks Enquanto no FireFox eles estão perfeitamente alinhados, no Chrome a caixa de seleção é sobre a linha de base (a propósito, você pode usar menções via @ se estiver interessado em respostas mais rápidas)
YakovL

3

input[type=checkbox]
{
    vertical-align: middle;
} 
<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>


2

Normalmente, deixo uma caixa de seleção sem rótulo e, em seguida, faço do "rótulo" um elemento separado. É uma dor, mas há tanta diferença entre navegadores entre como as caixas de seleção e seus rótulos são exibidos (como você notou) que é a única maneira de chegar perto de controlar como tudo fica.

Também acabo fazendo isso no desenvolvimento de winforms, pelo mesmo motivo. Penso que o problema fundamental com o controle da caixa de seleção é que são realmente dois controles diferentes: a caixa e o rótulo. Ao usar uma caixa de seleção, você fica a cargo dos implementadores do controle para decidir como esses dois elementos são exibidos próximos um do outro (e eles sempre entendem errado, onde errado = não é o que você deseja).

Eu realmente espero que alguém tenha uma resposta melhor para sua pergunta.


2

CSS:

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML:

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

O código acima colocará os itens da sua lista em três campos e apenas mudará as larguras para se adequarem.


2

A seguir, é apresentada uma consistência perfeita em pixels nos navegadores, mesmo no IE9:

A abordagem é bastante sensata, a ponto de ser óbvia:

  1. Crie uma entrada e um rótulo.
  2. Exiba-os como bloco, para que você possa flutuar como quiser.
  3. Defina a altura e a altura da linha com o mesmo valor para garantir que elas centralizem e alinhem verticalmente.
  4. Para medições em , para calcular a altura dos elementos, o navegador deve saber a altura da fonte desses elementos e não deve ser definido em medições em.

Isso resulta em uma regra geral aplicável globalmente:

input, label {display:block;float:left;height:1em;line-height:1em;}

Com tamanho de fonte adaptável por formulário, conjunto de campos ou elemento.

#myform input, #myform label {font-size:20px;}

Testado no Chrome, Safari e Firefox mais recente no Mac, Windows, Iphone e Android. E IE9.

Esse método provavelmente é aplicável a todos os tipos de entrada que não são maiores que uma linha de texto. Aplique uma regra de tipo para se adequar.


hm, isso parece bem quando o rótulo começa com uma letra minúscula, mas se começa com uma maiúscula, é muito pior. Você poderia adicionar um trecho aqui?
YakovL

2

Portanto, sei que isso já foi respondido várias vezes, mas sinto que tenho uma solução muito mais elegante do que as que já foram fornecidas. E não apenas uma solução elegante, mas duas soluções separadas para agradar sua fantasia. Com isso dito, tudo o que você precisa saber e ver está contido em 2 JS Fiddle's, com comentários.


A solução 1 baseia-se na "caixa de seleção" nativa do navegador fornecido, embora com um toque ... Está contida em uma div que é mais fácil de posicionar no navegador cruzado, com um estouro: oculto para cortar o excesso de uma caixa de seleção esticada de 1px (é assim que você não consegue ver as feias fronteiras do FF)

HTML simples: (siga o link para revisar o css com comentários, o bloco de código é para satisfazer o stackoverflow) http://jsfiddle.net/KQghJ/

<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>

A solução 2 usa o "Hack de alternância da caixa de seleção" para alternar o estado CSS de um DIV, que foi posicionado corretamente no navegador e configurado com um sprite simples para os estados desmarcados e verificados da caixa de seleção. Tudo o que é necessário é ajustar a posição de fundo com o referido Checkbox Toggle Hack. Esta, na minha opinião, é a solução mais elegante, pois você tem mais controle sobre suas caixas de seleção e rádios e pode garantir que eles tenham a mesma aparência no navegador.

HTML simples: (siga o link para revisar o CSS com comentários, o bloco de código é para satisfazer o StackOverflow) http://jsfiddle.net/Sx5M2/

<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>

Se alguém discordar desses métodos, deixe-me um comentário. Gostaria de ouvir alguns comentários sobre por que outras pessoas não se deparam com essas soluções ou, se o fazem, por que não vejo respostas aqui sobre elas? Se alguém vir um desses métodos falhar, seria bom ver isso também, mas eles foram testados nos navegadores mais recentes e dependem de métodos HTML / CSS bastante antigos e universais até onde eu vi.


1

Yay obrigado! Isso também tem me deixado louco para sempre.

No meu caso particular, isso funcionou para mim:

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

Estou usando o reset.css que pode explicar algumas das diferenças, mas isso parece funcionar bem para mim.


1

position: relative; tem alguns problemas no IE com z-index e animações como o slideUp / slideDown do jQuery.

CSS:

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

jQuery:

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

O estilo provavelmente precisa de ajustes, dependendo do tamanho da fonte usada no <label>

PS:
Eu uso o ie7js para fazer o css funcionar no IE6.


1

Use de forma simples vertical-align: sub, como pokrishka já sugeriu.

Violino

Código HTML:

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

Código CSS:

.checkboxes input {
    vertical-align: sub;
}

1

Solução simples:

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

Testado no Chrome, Firefox, IE9 +, Safari, iOS 9 ou superior

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.