更改下拉框默认选项的字体大小答案

【问题标题】：change font size of default option of dropdown box更改下拉框默认选项的字体大小
【发布时间】：2021-11-18 20:19:02
【问题描述】：

我正在开发一个移动网站 (360x640)。

如果您在图片中看到下拉框的默认选项（粉红色背景），并带有提问按钮和选项为选择一个类别...。 ，它的字体非常小，我正在尝试使用 CSS 更改它的字体大小，但它没有改变，保持原样，看起来非常小。请在 CSS 中提供帮助！！！！

我的前端移动视图。

 body{
    margin-left:20px;
    margin-top:20px;
    margin-right:20px;
    font-size: 20px;
}


     .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color:rgb(241, 241, 241);
        color: orangered;
        text-align: center;
      
      }

      .experience
      {
        display: block;
        float: right;
       

      }
      
      
      .see-all{
        float: right; 
        color: orangered;
      }


.choose-form
{
   
    background-color:rgb(246, 229, 246);
    padding: 10px;

}
.orange
{
    background-color:#f78336;
    font-size:30px;
    color:white;

}
 button
{
   
    background-color:#f78336;
    font-size:30px;
    color:white;


}



option{
    font-size: 50px;
}

<form class="choose-form">
  <div class="mb-3">
    <select class="form-select" id="question">
      <option> <span style="font-size:100px;">Select a category : Love,carrer,more ...</span></option>
      <option> <span style="font-size:100px;">Love</span></option>
      <option> <span style="font-size:100px;">Carrer</span></option>
      <option> <span style="font-size:100px;">Marriage</span></option>
    </select>
  </div>

  <nav class="navbar navbar-expand-lg navbar-light">
    <!-- edited line -->
    <span class="priceShow"> ₹99(including GST)</span>
    <span>Ideas what to ask</span>
    <div class="profile-icon" style="justify-content-end;">
      <button type="submit" class="btn btn-warning orange">Ask a Question </button>
    </div>
  </nav>
</form>

【问题讨论】：

尝试将样式应用到select 元素而不是options。
如@JohnP 所说，在选择框上应用字体大小样式。此外，我建议您尝试使用更具响应性的设计或使用 SCSS 功能，当您在各种宽度和高度的移动网站上工作时，它会让您的生活更轻松。
您的 HTML 无效。 您不能在 span 或 option 元素中包含 HTML 元素，只允许使用文本和 HTML 实体。 developer.mozilla.org/en-US/docs/Web/HTML/Element/option

标签： html css

【解决方案1】：

许多浏览器会将默认样式应用于select 下拉列表，因此要应用您的样式，您需要使用以下命令撤消此默认样式。这些变体适用于不同的浏览器。

select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

body {
    margin-left:20px;
    margin-top:20px;
    margin-right:20px;
    font-size: 20px;
}
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color:rgb(241, 241, 241);
    color: orangered;
    text-align: center;
}
.experience {
    display: block;
    float: right;
}
.see-all {
    float: right; 
    color: orangered;
}
.choose-form {
    background-color:rgb(246, 229, 246);
    padding: 10px;

}
.orange {
    background-color:#f78336;
    font-size:30px;
    color:white;
}
button {
    background-color:#f78336;
    font-size:30px;
    color:white;
}
option {
    font-size: 50px;
}
select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    font-size: 30px;
    padding: 10px;
}

<form class="choose-form">
  <div class="mb-3">
    <select class="form-select" id="question">
      <option> <span style="font-size:100px;">Select a category : Love,carrer,more ...</span></option>
      <option> <span style="font-size:100px;">Love</span></option>
      <option> <span style="font-size:100px;">Carrer</span></option>
      <option> <span style="font-size:100px;">Marriage</span></option>
    </select>
  </div>

  <nav class="navbar navbar-expand-lg navbar-light">
    <!-- edited line -->
    <span class="priceShow"> ₹99(including GST)</span>
    <span>Ideas what to ask</span>
    <div class="profile-icon" style="justify-content-end;">
      <button type="submit" class="btn btn-warning orange">Ask a Question </button>
    </div>
  </nav>
</form>

【讨论】：