Text alignment problem within select and input

Asked

Viewed 501 times

1

I’m having trouble defining the style of inputs and selects. The text is misaligned/cut, according to the figures below (first image in Chrome and the second image in IE, in Mozilla is equal to 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; }

Does anyone know what the problem is?

html css html-select

  • I think this is from padding: 3px 6px 3px 6px;. Experiment withdraw and see what happens

  • Continue with the cut text :/

2 answers

2

You can try it like this:

            .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

Increases the weight and also the line-weight. The font must be too big for the line size, and ends up cutting the text like this.

  • I will test. The problem is that there is a formatting pattern (line height should be 25px and the 13px font).

  • @Ma. Ok, just set the height of the object containing the text to be greater than 25px height, and also the line height to be 25px. Should work.

Browser other questions tagged html css html-select

You are not signed in. Login or sign up in order to post.