Alinhando texto e caixas de seleção para a mesma largura em CSS?

Question

Apr 03, 2012, 10:58 PM

Alinhando texto e caixas de seleção para a mesma largura em CSS?

Ok, isso é aparentemente impossível de acertar. Eu tenho uma caixa de texto e uma caixa de seleção. Eu quero que eles sejam da mesma largura exatamente para que eles se alinham na margem esquerda e na margem direita.

<code><!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
        </select>
    </body>
</html>
</code>

Isso faria você pensar, certo? Não. A caixa de seleção é 6px menor no Firefox. Veja a captura de tela.

Ok, então vamos editar o código e criar dois estilos.

<code><style type="text/css">
    input {
        width: 200px;
    }
    select {
        width: 206px;
    }
</style>
</code>

Ok, isso funciona!

Ah, espere, teste melhor no Chrome ...

Alguém pode me dizer como alinhá-los em todos os navegadores? Por que não consigo fazer largura: 200px no total, por que todos os navegadores a exibem de forma diferente? Além disso, enquanto estamos nisso, por que a caixa de texto e a caixa de seleção são diferentes? Como os colocamos na mesma altura? Já tentei altura e altura da linha sem sucesso.

Solução:

Ok, eu encontrei a solução com alguma ajuda das respostas abaixo. A chave é usar odimensionamento de caixa: caixa de borda propriedade assim quando você especificar a largura queinclui a borda e o preenchimento. Vejoexcelente explicação aqui. Então o navegador não pode encher.

O código está abaixo, também definiu a altura das caixas para o mesmo tamanho e recuou o texto dentro da caixa para alinhar. Você também precisa definir a borda, pois o Chrome tem uma borda muito estranha que ele usa para caixas de seleção, o que elimina o alinhamento. Isso funcionará para sites HTML5 (por exemplo, com suporte a IE9, Firefox, Chrome, Safari, Opera, etc.).

<code><!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
                border: 1px solid #000;
                padding: 0;
                margin: 0;
                height: 22px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            input {
                text-indent: 4px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
            <option>123456789 123123123123</option>
            <option>123456789 123123123123 134213721381212</option>
        </select>
    </body>
</html>
</code>

Apenas um aviso final você pode não querer botões de entrada, caixas de seleção, etc para ser incluído neste estilo, então use oinput:not([type='button']) para não aplicá-lo a certos tipos ou usarinput[type='text'], input[type='password'] para especificar aqueles que você deseja aplicar.