HTML: Select Option input select box Font size not working-CodePudding

I'm trying to style an input select box, changing all of the Font size. However, when I load the webpage the select box still has the default font size. Any help please?

.shopengine-category-select-wraper select option {
   font-size: 30px;
    font-family: 'Roboto';
}

   <div >
      <select  name="product_cat">
         <option value="">Categories</option>
         <option  value="95">Women's </option>
         <option  value="93">Men's </option>
         <option  value="92">Daniel Wellington </option>
         <option  value="88">Master Classic Watch </option>
      </select>
   </div>

CodePudding user response：

You should give the size to select only the option font-size inherit from its parent.

.shopengine-category-select-wraper select {
   font-size: 30px;
    font-family: 'Roboto';
}

<div >
      <select  name="product_cat">
         <option value="">Categories</option>
         <option  value="95">Women's </option>
         <option  value="93">Men's </option>
         <option  value="92">Daniel Wellington </option>
         <option  value="88">Master Classic Watch </option>
      </select>
   </div>

CodePudding user response：

Just add css for both (select, which is the input, and option, which are the options)

.shopengine-category-select-wraper select,
.shopengine-category-select-wraper option {
  font-size: 30px;
  font-family: 'Roboto';
}

<div >
  <select  name="product_cat">
    <option value="">Categories</option>
    <option  value="95">Women's </option>
    <option  value="93">Men's </option>
    <option  value="92">Daniel Wellington </option>
    <option  value="88">Master Classic Watch </option>
  </select>
</div>