Question

所以，我还没有看到任何与我所遇到的问题相关的问题。我有一堆CSS和HTML，但问题点是我的文本和数字输入。我的CSS和样式适用于Windows上的谷歌浏览器，但在任何Safari或基于苹果的浏览器上都存在固有问题。

selectAnswer下拉列表和numberAnswers输入不会改变Safari的大小，这会使它们难以阅读，因为它们默认比我文本的其他部分小得多

为了使下拉列表和数字输入更大，或者是否有一些我只是忽略的更简单的东西，我是否需要做一些特定于Safari的事情？

HTML：

<p class="question">Questions</p>
<br/>        

<div class="selectAnswer">

    <select style="font-size:16pt">
        <option value="novalue" id="novalue">Please select an option.</option>
        <option value="option1" id="option1">option1</option>
        <option value="option2" id="option2">option2</option>
        <option value="option3" id="option3">option3</option>
        <option value="option4" id="option4">option4</option>
        <option value="option5" id="option5">option5</option>
        <option value="option6" id="option6">option6</option>
    </select>
</div> 
<br/>


<div class="numberAnswers">

    <label for="num1">please input the first number</label><br/>
    <input type="number" style="font-size:16pt;height:22px;" name="num1" id="qNum1">

    <br/>
    <br/>

    <label for="num2">please input the second number</label><br/>
    <input type="number" style="font-size:16pt;height:22px;" name="num2" id="qNum2">
    <br/>
</div>

CSS：

label{
    margin-left: 30px;
    display: block;
    color: #0B2643;
    font-size:22px;
    -webkit-transition: color 0.5s, font-size 0.5s;
    transition: color 0.5s, font-size 0.5s;
}

label:hover{
    color:#7A0000;
    font-size:26px;
}

select{
    line-height:18px;
}

.selectAnswer{
    display:block;
    color:#0B2643;
}

.numberAnswers{
    display:block;
    color:#0B2643;
}

Answer 1

尝试将其放在CSS表格的顶部：

* {
    -webkit-appearance: none;
}

Answer 2

https://jsfiddle.net/xgebi/dy1wduw1/

您需要添加以选择

 select {
   -webkit-appearance: none;
   font-size: 24px;
}

Safari文本输入和数字输入大小

2 个答案: