поле ввода номера CSS делает странным на некоторых версиях IOS

Question

Поле ввода номера не отображается должным образом на IOS. Номер обрезается внизу. Это работает для определенных версий ios, но не для других. Я застрял, пожалуйста, помогите

input[type=submit] {
    text-align: center;
}

.page_q3 input[type="number"] {
    height: 91px;
    width: 110px;
    color: #464356;
    font-family: "Source Sans Pro";
    font-size: 82px;
    font-weight: 600;
    text-align: center;
    border: none;
    border-bottom: 2px solid #464356;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

<div class="page_q3">

    <div class="div_minus"><img src="<?=$templateDir?>/images/minus.jpg" class="minus" data-quantity="minus" data-field="<?=$inputName?>" /> </div>

    <div class="div_number"><input type="number" id="<?=$inputName ?>" name="<?=$inputName?>" value="<?=$_SESSION[$inputName]?>" placeholder="0" /> </div>

    <div class="div_plus"><img src="<?=$templateDir?>/images/plus.jpg"
    class="plus" data-quantity="plus" data-field="<?=$inputName?>" /> </div>
</div>

Как это должно выглядеть https://ibb.co/y8msSpL

как это выглядит на самом деле https://ibb.co/rkbyPF5

Answer 1

Вы можете попробовать удалить border-radius и padding, добавленные iOS по умолчанию:

.page_q3 input[type="number"] {
    -webkit-border-radius: 0; 
    border-radius: 0;
    padding: 0;
}