Text alignment problem within select and input

1

I'm having trouble defining the style of inputs and selects. The text is misaligned / cut, as the figures below (first image in chrome and second in IE, in Mozilla is equal to chrome)

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?

    
asked by anonymous 12.07.2016 / 05:31

2 answers

2

You can try 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>
    
12.07.2016 / 15:01
1

Increases weight and also line-weight . The font should be too large for the size of the line, and it will cut the text that way.

    
12.07.2016 / 12:14