Como alinhar caixas e seus rótulos consistentemente cross-browsers

Question

Este é um dos problemas CSS menores que me pragas constantemente. Como é que as pessoas ao redor Stack Overflow alinhar verticalmente checkboxes e sua labels consistentemente cross-browser ? Sempre que eu alinhá-las corretamente no Safari (geralmente usando vertical-align: baseline na input), eles estão completamente fora no Firefox e IE. Corrigi-lo no Firefox e Safari e IE são inevitavelmente desarrumada. I perder tempo com este código cada vez que um formulário.

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

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

Eu costumo usar redefinição de Eric Meyer, então elementos de formulário são relativamente limpa de substituições. Ansioso para quaisquer dicas ou truques que você tem para oferecer!

Answer 1

Depois de mais de uma hora de ajustes, testes e tentando diferentes estilos de marcação, eu acho que pode ter uma solução decente. Os requisitos para este projecto específico foram:

1. As entradas devem estar em sua própria linha.
2. entradas de caixa de seleção necessário alinhar verticalmente com o texto do rótulo semelhante (se não idêntica) em todos os navegadores.
3. Se os envoltórios texto da etiqueta, ele precisa ser recuado (de forma que nenhum embrulho para baixo por baixo da caixa).

Antes de eu entrar em qualquer explicação, vou apenas dar-lhe o código:

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 em jsFiddle .

Este código assume que você está usando uma redefinição de como Eric Meyer de que não substitui as margens de entrada de formulário e estofamento (daí colocar margem e preenchimento resets na CSS de entrada). Obviamente, em um ambiente vivo você provavelmente vai ser nidificação / substituindo o material para apoiar outros elementos de entrada, mas eu queria manter as coisas simples.

coisas a nota:

• A declaração *overflow é um inline IE corte (o hack estrela-propriedade). Ambos IE 6 e 7 vai notar isso, mas o Safari e Firefox irá ignorá-lo corretamente. Eu acho que pode ser CSS válido, mas você ainda é melhor fora com comentários condicionais; apenas utilizado pela simplicidade.
• Como melhor eu posso dizer, a única declaração vertical-align que foi consistente em todos os navegadores foi vertical-align: bottom. A definição deste e depois relativamente posicionando para cima comportou quase idêntica no Safari, Firefox e IE com apenas um pixel ou dois de discrepância.
• O grande problema em trabalhar com alinhamento é que o IE coloca um monte de espaço misterioso em torno de elementos de entrada. Não é de preenchimento ou margem, e é condenado persistente. Definir uma largura e altura na caixa de seleção e, em seguida, overflow: hidden para alguns cortes razão fora do espaço extra e permite o posicionamento do IE para agir de forma muito semelhante ao Safari e Firefox.
• Dependendo do seu dimensionamento texto, você vai, sem necessidade dúvida para ajustar o posicionamento relativo, largura, altura, e assim por diante para fazer as coisas olhando direito.

Espero que isso ajude alguém! Eu não tentei esta técnica específica sobre quaisquer outros que o que eu estava trabalhando nesta manhã de projectos, de forma definitiva tubo até se você encontrar algo que funciona de forma mais consistente.

Answer 2

necessidades Às vezes vertical-align dois inline (espaço, etiqueta, de entrada, etc ...) elementos ao lado do outro para funcionar corretamente. As seguintes caixas de seleção estão devidamente verticalmente centrado no IE, Safari, FF e Chrome, mesmo que o tamanho do texto é muito pequeno ou grande.

Eles todos flutuador ao lado do outro na mesma linha, mas os meios nowrap que todo o rótulo de texto sempre fica ao lado da caixa de seleção.

A desvantagem é as etiquetas 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 do rótulo muito tempo que necessário para embrulhar sem embrulho debaixo da caixa de seleção, você pode usar o estofamento e travessão texto negativo sobre os 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>

Answer 3

Trabalhando fora de do Uma Crayon solução , tenho uma coisa 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>

Renders de pixel a pixel o mesmo no Safari (cuja confiança eu linha de base) e Firefox e IE7 verificar como bom. Ele também funciona para vários tamanhos de fonte etiqueta, grandes e pequenos. Agora, para a fixação da linha de base do IE em seleciona e entradas ...

---

Update: (Third-Party Edit)

A posição bottom adequada depende font-family e font-size! Eu encontrei usando bottom: .08em; para caixa & elementos de rádio é um bom valor em geral. Eu testei no Chrome / Firefox / IE11 em janelas com fontes Arial & Calibri usando vários pequenos / médios / grandes font-tamanhos.

.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>

Answer 4

Uma coisa fácil que parece funcionar bem é aplicar uma ajustar a posição vertical da caixa de seleção com vertical-align. Ele ainda será variam entre os navegadores, mas a solução é simples.

input {
    vertical-align: -2px;
}

Referência

Answer 5

Tente vertical-align: middle

também o seu código parece que deve ser:

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

Answer 6

Tente minha solução, eu tentei no IE 6, FF2 e Chrome e torna pixel por pixel em todos os três browsers.

* {
  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>

Answer 7

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

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

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

Answer 8

Eu costumo usar a altura da linha, a fim de 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.

Answer 9

Eu não testei completamente a minha solução, mas parece grande trabalho.

O meu HTML é simplesmente:

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

Eu, então, definir todas as caixas para 24px tanto para altura e largura. Para tornar o texto alinhado faço line-height também 24px e atribuir vertical-align: top; do rótulo assim:

EDIT: Após IE testando eu adicionei vertical-align: bottom; à entrada e mudou CSS do rótulo. Você pode achar que você precisa de um caso IE css condicional para resolver estofamento -. Mas o texto ea caixa são inline

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;
}

Se encontra ninguém que isso não funciona, por favor, me avise. Aqui está-lo em ação (em Chrome e IE - desculpas como screenshots foram tiradas em retina e usando o Parallels para IE):

Answer 10

Eu acho que esta é a maneira mais fácil

input {
    position: relative;
    top: 1px;
}

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

Answer 11

Isso 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>

Answer 12

Eu não gosto de posicionamento relativo, porque torna elemento prestados acima de tudo em seu nível (ele pode ficar em cima de alguma coisa, se você tem o layout complexo).

Eu descobri que vertical-align: sub as marcas caixas de boa aparência bastante alinhado no Chrome, Firefox e Opera. Não foi possível verificar Safari desde que eu não tenho MacOS e IE10 é um pouco fora, mas eu achei que fosse boa solução suficiente para mim.

Outra solução poderia ser a de tentar fazer CSS específico para cada navegador e afinar-lo com algum vertical-align em% / pixels / EMS: http://css-tricks.com/snippets/css/browser-specific-hacks/

Answer 13

Agora que flexbox é suportado em todos os navegadores modernos, algo como esta parece ser 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 completa prefixada versão demo:

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}

<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>

Answer 14

Eu nunca tive um problema com a fazê-lo como este:

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

Answer 15

Só queria acrescentar à discussão sobre o 'para' atributo em rótulos (um pouco offtopic):

Por favor, fornecê-la, mesmo quando não é necessário, porque é muito conveniente para usar a partir javascript:

var label = ...
var input = document.getElementById(label.htmlFor);

Isso é muito mais conveniente do que tentando descobrir wheter o rótulo tem a entrada aninhados, ou wheter a entrada é antes do rótulo, ou depois .. etc. E nunca é demais para fornecê-lo .. então.

Apenas meus 2 centavos.

Answer 16

Se você usar Formulários ASP.NET Web você não precisa se preocupar com DIVs e outros elementos ou tamanhos fixos. Podemos alinhar o texto <asp:CheckBoxList> definindo float:left para o tipo de entrada checkboxlist em CSS.

Por favor, verifique o seguinte exemplo de código:

.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>

Answer 17

A resposta escolhida com mais de 400 upvotes não funcionou para mim no Chrome 28 OSX, provavelmente porque não foi testado em OSX ou que ele fez um trabalho em tudo o que estava ao redor em 2008 quando esta pergunta foi respondida.

Os tempos mudaram, e novas soluções CSS3 estão agora viável. Meus utiliza a solução pseudoelements para criar um costume caixa . Assim, as estipulações (prós ou contras, no entanto você olha para ele) são os seguintes:

• Só funciona em navegadores modernos (FF3.6 +, IE9 +, Chrome, Safari)
• se baseia em uma caixa de design personalizado, que será processado exatamente o mesmo em todos os navegadores / OS. Aqui eu apenas escolhi algumas cores simples, mas você pode sempre adicionar gradientes lineares e tal para dar-lhe mais de um estrondo.
• é voltado para um determinado tamanho de fonte / font, que se mudou, você simplesmente alterar o posicionamento e tamanho da caixa de seleção para fazer parecer alinhados verticalmente. Se ajustado corretamente, o resultado final ainda deve ser próximo a exatamente o mesmo em todos os sistemas de navegador / operacionais.
• Sem propriedades vertical de alinhamento, não há flutuadores
• Deve-se usar a marcação prevista no meu exemplo, não vai funcionar se estruturado como a questão, no entanto, o layout será essencialmente a mesma aparência. Se você deseja mover as coisas ao redor, você vai ter que mover também o CSS associado

O seu HTML:

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

Seu CSS:

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;
}

Esta solução esconde a caixa de seleção , e adiciona e estilos pseudoelements à etiqueta para criar a caixa de seleção visível. Porque a etiqueta está ligada à caixa escondida, o campo de entrada ainda serão atualizados eo valor será submetido com o formulário.

jsFiddle: http://jsfiddle.net/SgXYY/6/

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

Hope alguém acha isso! Útil

Answer 18

Se você está usando o Twitter Bootstrap, você pode simplesmente usar a classe checkbox na <label>:

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

Answer 19

Hardcore altura e largura da caixa, remova seu preenchimento, e fazer a sua altura mais as margens verticais igual a line-height do rótulo. Se o texto do rótulo é em linha, flutuar a caixa de seleção. Firefox, cromo, e IE 7 + todo tornar o exemplo seguinte de forma idêntica: http://www.kornea.com/ css-caixa-align

Answer 20

<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 vertical-align apenas em células de tabela ou inline-block se utilizando tag rótulo.

Answer 21

Com uma caixa de seleção do tipo de entrada acondicionada dentro da etiqueta e flutuou para a esquerda assim:

<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;
}

Certifique-se a altura do é idêntico ao line-height do (blocklevel).

Answer 22

input[type=checkbox]
{
    vertical-align: middle;
} 

<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

Answer 23

Let de finalmente dar uma olhada na origem do problema

As caixas de seleção são processados ??usando imagens (pode-se definir os personalizados via CSS). Aqui está um (desmarcado) caixa de seleção no FireFox, realçados com DOM inspector:

E aqui é a mesma caixa sem estilo no Chrome:

Você pode ver a margem (laranja); estofo não está presente (seria mostrado verde). Então, qual é essa pseudo-margem à direita e na parte inferior da caixa de seleção? Estes são partes da imagem usada para a caixa de seleção . É por isso que usando apenas vertical-align: middle realmente não são suficientes e que é a fonte dos problemas de cross-browser.

Então o que podemos fazer sobre isso?

Uma opção óbvia é - substituir as imagens! Felizmente, pode-se fazer isso via CSS e substituir aqueles com imagens externas, base64 (in-CSS) imagens, SVG in-CSS ou apenas pseudo-elementos. É uma robusta (cross-browser!) Abordagem, e aqui está um exemplo de tal ajuste roubado esta questão :

.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 querer ler alguns artigos mais aprofundados sobre tal estilo como alguns listados aqui ; está fora do escopo desta resposta.

Ok, ainda que solução sobre não-personalizados-images-pseudo-elementos ou?

TL; DR: Parece que isto não vai funcionar, checkbox uso personalizado em vez

Primeiro, o aviso de deixar que, se em outros navegadores esses pseudo-margens dentro ícone caixa eram arbitrárias, não houve solução consistente. Para uma construção, nós temos que explorar a anatomia de tais imagens em navegadores existentes.

Então, o que os navegadores têm os pseudo-margens em caixas? Eu verifiquei Chrome 75, Vivaldi 2.5 (base-cromo), FireFox 54 (não pergunte por que tal desatualizado), IE 11, Borda 42, Safari ?? (Emprestado por um minuto, esqueceu-se de verificar a versão). Apenas Chrome e Vivaldi tem tais pseudo-margens (Eu suspeito que todos os navegadores baseados no Chromium também, como Opera).

Qual é o tamanho desses 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% de largura / altura e, consequentemente, 0.9-1.0px em unidades absolutas. A precisão pode ser questionada, no entanto: experimentar diferentes valores de zoom para a caixa de seleção. Nos testes em ambos cromo e Vivaldi o tamanho relativo da pseudo-margem é muito diferente a valores de zoom 10, 20 e a valores de 11-19 (??):

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 do pseudo-margem, vamos note que este não é o suficiente. são tele tamanhos dos ícones de caixa de seleção o mesmo para todos os navegadores? Ai de mim! Aqui está o que mostra DOM Inspector para caixas sem estilo:

• FireFox: 13.3px
• Chromium baseado em: 12.8px para a coisa toda, portanto, de 12,8 (100% - 14%) = 11px para o que é visualmente percebida como caixa de seleção
• IE 11, Borda: 13px
• Safari: n / a (estes devem ser comparados na mesma tela, eu acredito)

Agora, antes de discutir quaisquer soluções ou truques, vamos perguntar: qual é a correta alinhamento? O que estamos tentando alcançar? Para certo ponto é uma questão de gosto, mas, basicamente, eu posso pensar em aspectos seguintes "nice" alinhamentos:

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

ou têm a mesma linha do meio em termos de letras minúsculas:

ou mesmo linha do meio em termos de letras maiúsculas (é mais fácil de ver a diferença para o tamanho da fonte diferente):

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

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

Agora que as ferramentas que temos que:

1. ajustar o tamanho da caixa de seleção
2. reconhecer cromo com sua caixa de seleção margined-pseudo e definir estilos específicos
3. ajustar caixa / label alinhamento vertical

?

1. Em relação à caixa ajuste de tamanho: há width, height, size, zoom, scale (tenho perdi alguma coisa?). zoom e scale não permitem definir o tamanho absoluto, para que eles possam ajudar apenas com o ajuste para o tamanho do texto, não definir o tamanho do cross-browser (a menos que possamos escrever regras específicas do navegador). size não funciona com Chrome (que ele funcione com o velho IE? de qualquer maneira, não é tão interessante). width e trabalho height no Chrome e 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. Nota: é mínima (largura, altura), que define um tamanho de caixa (se a largura ? altura, a área de caixa do lado de fora quadrado é adicionado a "pseudo-margem")

   .

   Uma coisa lamentável é, os pseudo-margens na caixa Chrome não estão definidas para zero para qualquer largura e altura, tanto quanto eu posso ver.

2. Eu tenho medo não há nenhum método somente CSS confiável estes dias.

3. Vamos considerar o alinhamento vertical. vertical-align não pode dar resultados consistentes quando definido como middle ou baseline por causa da pseudo-a margem do Chrome, a única opção real para obter o mesmo "sistema de coordenadas" para todos os navegadores é a etiqueta alinhar e entrada para o top:

   

   (na foto: vertical-align: top, bottom e bottom sem box-shadow)

Assim que resultado é que vamos chegar com isso?

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

<label><input type="checkbox">label</label>

O trecho acima funciona com Chrome (navegadores Chromium-based), mas outros navegadores exigem um tamanho menor da caixa de seleção. Parece ser impossível ajustar o tamanho eo alinhamento vertical de uma forma que funciona em torno peculiaridade imagem caixa do Chromium. Minha sugestão final é: caixas de utilização personalizados em vez - e você vai evitar a frustração:)

Answer 24

Eu costumo deixar uma caixa de seleção não marcado e, em seguida, fazer a sua "etiqueta" um elemento separado. É uma dor, mas não há tanta diferença cross-browser entre como caixas e seus rótulos são exibidos (como você observou) que esta é a única maneira que eu posso chegar perto de controlar a forma como tudo parece.

Eu também acabam fazendo isso no desenvolvimento winforms, pela mesma razão. Eu acho que o problema fundamental com o controle de caixa de seleção é que é realmente dois controles diferentes: a caixa e o rótulo. Usando uma caixa de seleção, você está deixando para os implementadores do controle para decidir como esses dois elementos são exibidos ao lado do outro (e eles sempre errar, onde = erradas não o que você quiser).

Eu realmente espero que alguém tem uma melhor resposta à sua pergunta.

Answer 25

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 irá colocar sua lista itens em threecols e apenas alterar as larguras de terno.

Answer 26

A seguir dá consistência perfeita de pixels em todos os navegadores, mesmo IE9:

A abordagem é bastante sensível, a ponto de ser óbvia:

1. Criar uma entrada e um rótulo.
2. exibi-las como blocos, para que possa flutuar-los como quiser.
3. definir a altura e a linha de altura para o mesmo valor para assegurar que o centro e alinhar verticalmente.
4. Para em medições, para calcular a altura dos elementos, o navegador deve saber a altura da fonte para esses elementos, e não deve-se ser definido em em medições.

Isso resulta em uma regra geral aplicável globalmente:

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

Com o tamanho da fonte adaptável por forma, de campos ou elemento.

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

Testado no último Chrome, Safari e Firefox no Mac, Windows, iPhone e Android. E IE9.

Este método é provável aplicável a todos os tipos de entrada que não são mais elevados do que uma linha de texto. Aplicar uma regra tipo de terno.

Answer 27

Então, eu sei que este foi respondida muitas vezes, mas eu sinto que tenho uma maneira solução mais elegante do que aqueles que foram já fornecidas. E não apenas 1 solução elegante, mas 2 soluções diferentes para agradar a sua fantasia. Com isso dito, tudo o que você precisa saber e ver estão contidos em 2 JS O violino de, com comentários.

---

Solução # 1 depende do nativo "caixa" do navegador dado, embora com uma torção ... Sua contido em uma div que é mais fácil para a posição cross-browser, com um overflow: hidden para cortar o excesso de um 1px caixa esticada (este é para que você não pode ver as bordas feias de FF)

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

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

---

Solução # 2 usa a "Caixa de seleção Alternar hack" para alternar o estado CSS de um DIV, que foi devidamente posicionado através do navegador e configuração com um sprite simples para a caixa de seleção desmarcada e marcada estados. Tudo o que é necessário é para ajustar o background-position com o dito Caixa de seleção Alternar Corte. Isso, na minha opinião, é a solução mais elegante que você tenha mais controle sobre suas caixas e rádios, e posso garantir que eles têm a mesma aparência através do navegador.

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

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

---

Se alguém discordar de com estes métodos, por favor me deixe um comentário, eu gostaria de ouvir alguns comentários sobre por que os outros não se deparar com estas soluções, ou se eles têm, por isso não vejo respostas aqui em relação a eles? Se alguém vê um desses métodos falham, seria bom ver isso também, mas estes foram testados nos navegadores mais recentes e confiar em métodos de HTML / CSS que são bastante antiga, e universal, tanto quanto eu já vi.

Answer 28

Yay obrigado! Isso também foi dirigindo-me 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;
}

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

Answer 29

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

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 styling provavelmente precisa de ajustes, dependendo do tamanho da fonte usada em <label>

PS:
Eu uso ie7js para fazer o trabalho CSS no IE6.

Answer 30

Use simplesmente vertical-align: sub, como pokrishka já foi sugerido.

Fiddle

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;
}