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:
E aqui está a mesma caixa de seleção não estilizada no Chrome:
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: middle
nã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 zoom
para a caixa de seleção. Nos meus testes no Chrome e no Vivaldi, o tamanho relativo da pseudo-margem é muito diferente nos zoom
valores 10, 20 e 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 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):
ou tem a mesma linha do meio em termos de letras minúsculas:
ou a mesma linha do meio em termos de letras maiúsculas (é mais fácil ver a diferença para diferentes tamanhos de fonte):
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):
Agora, quais ferramentas precisamos:
- ajustar o tamanho da caixa de seleção
- reconhecer o Chromium com sua caixa de seleção com margens pseudo-marginadas e definir estilos específicos
- ajustar o alinhamento vertical da caixa de seleção / etiqueta
?
Em relação ao ajuste do tamanho caixa : há width
, height
, size
, zoom
, scale
(eu perdi alguma coisa?). zoom
e scale
nã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). size
não funciona com o Chrome (funcionou com o IE antigo? de qualquer maneira, não é tão interessante). width
e height
trabalhar 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.
Receio que não exista um método somente CSS confiável hoje em dia.
Vamos considerar o alinhamento vertical. vertical-align
Não é possível obter resultados consistentes quando definido como middle
ou baseline
por 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
:
(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 :)