CODEWITHSUNDEEP
htmlcss
theaminuli
theaminuli

Reputation: 126

HTML: Select Option input select box Font size not working

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 class="shopengine-category-select-wraper">
      <select class="shopengine-ele-nav-search-select" name="product_cat">
         <option value="">Categories</option>
         <option class="" value="95">Women's </option>
         <option class="" value="93">Men's </option>
         <option class="" value="92">Daniel Wellington </option>
         <option class="" value="88">Master Classic Watch </option>
      </select>
   </div>

Upvotes: 0

Views: 954

Answers (2)

manjiro sano
manjiro sano

Reputation: 842

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 class="shopengine-category-select-wraper">
  <select class="shopengine-ele-nav-search-select" name="product_cat">
    <option value="">Categories</option>
    <option class="" value="95">Women's </option>
    <option class="" value="93">Men's </option>
    <option class="" value="92">Daniel Wellington </option>
    <option class="" value="88">Master Classic Watch </option>
  </select>
</div>

Upvotes: 1

Rajpal Singh
Rajpal Singh

Reputation: 311

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 class="shopengine-category-select-wraper">
      <select class="shopengine-ele-nav-search-select" name="product_cat">
         <option value="">Categories</option>
         <option class="" value="95">Women's </option>
         <option class="" value="93">Men's </option>
         <option class="" value="92">Daniel Wellington </option>
         <option class="" value="88">Master Classic Watch </option>
      </select>
   </div>

Upvotes: 1

Related Questions