Como obter largura igual de entrada e campos selecionados

109

No formulário, tenho um campo de seleção e dois campos de entrada. Esses elementos são alinhados verticalmente. Infelizmente, não consigo obter a largura igual desses elementos.

Este é o meu código:

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

Por exemplo, a melhor largura para o elemento selecionado é 198 ou 199 px (é claro que tentei 193 px, mas a diferença é grande). Acho que depende da resolução, em vários computadores e navegadores já que esses elementos não têm larguras iguais (às vezes acho que a diferença é de cerca de 1 ou 2 px). Tentei definir esses elementos em div ou linhas de tabela, mas não ajudou.

P: Como posso obter larguras precisamente iguais desses elementos?

html css html-select border-box luk4443
fonte
1
Mesma pergunta feita aqui: stackoverflow.com/questions/895904/…
BlaM

Respostas:

134

Resposta atualizada

Aqui está como alterar o modelo de caixa usado pelos elementos input / textarea / select para que todos se comportem da mesma maneira. Você precisa usar a box-sizingpropriedade que é implementada com um prefixo para cada navegador

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

Isso significa que a diferença de 2 pixels mencionada anteriormente não existe.

exemplo em http://www.jsfiddle.net/gaby/WaxTS/5/

nota: no IE funciona a partir da versão 8 e superior.

Original

se você redefinir suas bordas , o selectelemento sempre será 2 pixels a menos do que os inputelementos.

exemplo: http://www.jsfiddle.net/gaby/WaxTS/2/

Gabriele Petrioli
fonte
Obrigado pela resposta. E se eu definir a borda para 2px, haverá 4 pixels entre os campos de entrada e seleção, para a borda de 3px - 6px ...?
luk4443 de
1
@luk, não. Se a entrada e a seleção tiverem a mesma largura de borda, a diferença permanecerá em 2 pixels.
Gabriele Petrioli 01 de
Obrigado. Eu tento seu código em vários navegadores e no Firefox está tudo bem, mas não funciona no IE 8 e Opera (existem diferenças entre a entrada e a largura selecionada) :(
luk4443
1
Talvez você quisesse especificar o tamanho da caixa: caixa de borda? Acho que é isso que você quis dizer. A caixa de conteúdo é o padrão onde preenchimento + margens adicionam largura.
O'Rooney,
1
Realmente deveria ser: -ms-box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; tamanho da caixa: caixa de conteúdo; A sintaxe padrão deve ser a última a seguir a metodologia de aprimoramento progressivo para que, no futuro, quando o padrão for amplamente implementado, os agentes do usuário usarão como padrão a sintaxe padrão e você poderá remover as versões prefixadas.
user1739635
118

Tentei a resposta de Gaby (+1) acima, mas só parcialmente resolveu meu problema. Em vez disso, usei o seguinte CSS, onde content-box foi alterado para border-box:

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
tomsv
fonte
Sim, parece que campos de formulário, por exemplo: textarea, campos de entrada sempre funcionam bem com o modelo de caixa de borda. botão, caixa de seleção, rádio, enviar, redefinir e entrada de pesquisa são caixa de borda por padrão.
Vennsoh
2
Aqui está um bom argumento de por que você deve usarbox-sizing: border-box . Para uma boa implementação universal, considere definir o elemento html de nível superior e, em seguida, herdar para baixo para que possa ser facilmente substituído.
KyleMit
content-box não fez nada no meu caso. Eu precisava do border-box para que tivessem a mesma largura. O Border-box é definitivamente a melhor solução, obrigado.
Manuel Hoffmann,
5

Adicione este código em css:

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }
151291
fonte
-4

crie outra classe e aumente com o tamanho com exemplo de 2px

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }
ionMobDev
fonte