1

Estou com problemas ao definir o estilo de inputs e selects. O texto fica desalinhado/cortado, conforme as figuras abaixo (primeira imagem no chrome e a segunda no IE, no Mozilla está igual ao chrome)

Imagem no chrome

Imagem no IE

input{
height: 25px;
border-radius: 0px;
border: 1px solid;  
font-size: 13px; }


select{
height: 25px;
border-radius: 0px;
font-size: 13px;
border: 1px solid;
padding: 3px 6px 3px 6px;
background: url(seta.png) no-repeat right #ffffff; } 

Alguém sabe qual é o problema?

2
  • Eu acho que isso é do padding: 3px 6px 3px 6px;. Esperimente retirar e ver o que acontece
    – Miguel
    Commented 12/07/2016 às 7:42
  • Continua com o texto cortado :/
    – LauBF
    Commented 12/07/2016 às 10:02

2 Respostas 2

2

Você pode tentar assim:

            .form-field{
                min-width: 350px;
                height: 25px;
                border-radius: 0px;
                border: 1px solid;
                font-size: 13px; 
                padding: 3px 6px 3px 6px;
                line-height: 30px;
            }
            label{min-width: 50px;display: inline-table;}
            select.form-field{
                -webkit-appearance: none;
                -moz-appearance: none;
                -ms-appearance: none;
                -o-appearance: none; 
                height: 35px;
                background: url('https://cdn0.iconfinder.com/data/icons/glyphpack/26/double-arrow-down-512.png');
                background-repeat: no-repeat;
                background-position: 98%;
                background-size: 15px 15px; 
            } 
        <label for="">Input</label>
        <input type="text" class="form-field"><br><br><br><br><br>
        <label for="">Select</label>
        <select name="" id="" class="form-field">
            <option value="">opc 01</option>
            <option value="">opc 02</option>
            <option value="">opc 03</option>
            <option value="">opc 04</option>
            <option value="">opc 05</option>
        </select>

1

Aumenta o weight e também o line-weight. O fonte deve estar grande demais para o tamanho da linha, e acaba cortando o texto desse jeito.

2
  • Vou testar. O Problema é que existe um padrão de formatação (altura da linha deve ser 25px e a fonte 13px).
    – LauBF
    Commented 12/07/2016 às 10:32
  • @Ma. Ok, apenas redefina que a altura do objeto que contém o texto seja maior que 25px de altura, e também da altura da linha seja 25px. Deve funcionar. Commented 13/07/2016 às 8:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .