How to Change the Font-Size of a Select Option

How do I change the font-size of an option element within select ?

One solution could be to wrap the options inside optgroup:

optgroup { font-size:40px; }

<select>
  <optgroup>
    <option selected="selected" class="service-small">Service area?</option>
    <option class="service-small">Volunteering</option>
    <option class="service-small">Partnership & Support</option>
    <option class="service-small">Business Services</option>
  </optgroup>
</select>

Font size of select options element text in html5

You can increase by default selected option's font size by adding font-size in select. For increasing the select option's font size, keep options in optgroup and in css make a class called optgroup and fixed a font size.

optgroup { font-size:40px; }

<form action="" method="GET">
    <select name="selection" style="height:80px; width:300px; vertical-align: middle;font-size: 40px;">
      <optgroup>
        <option value="not satisfied">Not Satisfied</option>
        <option value="satisfied">Satisfied</option>
        <option value="very satified">Very Satisfied</option>
       </optgroup>
    </select>
</form>

Select Option Font size in not changing

Try this..

<style>
.drpdwn-style{
    width: 300px; 
    margin: 10px; 

font-size:10px;
border:0; 
-webkit-appearance: none;
}  
</style>
<label for="Department">Choose a Department:</label>
<select name="Select Department" class= "drpdwn-style" onchange="location = this.value;">
<option value="#">All Departments</option>
<option value="#">Cardiology</option>
<option value="#">Plastic, Cosmatic & Reconstrustive Surgery</option>
<option value="#">Dentistry</option>
</select>

How can I change the font-size of a select option?

Add a CSS class to the <option> tag to style it: http://jsfiddle.net/Ahreu/

Currently WebKit browsers don't support this behavior, as it's undefined by the spec. Take a look at this: How to style a select tag's option element?

How to change font size inside option of a select box if it has number?

Yo cant individually style elements in options. This element is rendered by the OS, not HTML. It cannot be styled via CSS. There are replacement plug-ins that look like a SELECT, but are actually composed from regular HTML elements that CAN be styled.

Use instead

https://github.com/HubSpot/select

https://select2.org/

How to change font size of the first option tag in a dropdown menu (select)?

If this below is the option you want to change the font size in SELECT tag

    <option id="op1">option 1</option>

Place the below code in head element

   <script>
     document.getElementById("op1").style.fontSize ="25px";
   </script>

Change font-size based on selected option

I've created a jsfiddle to achieve the same result that is required. It would require javascript & jquery to achieve the result you're expecting. Changing the dropdown from one form to another is an Event, and Events exists in Jquery, in your case, we've to use .change() event.

Add the below javascript code :

$(".target").change(function(){
   if (this.value == "2") {
     $(this).css({"font-size" : "34px"});
   }
});

the above code says that when you select Option 2 from the dropdown, it would change the size of font to 34px;, you can modify the fiddle according to your needs :)

$(".target").change(function() {  if (this.value == "2") {    $(this).css({      "font-size": "34px"    });  }});

select {  -moz-appearance: none;  -webkit-appearance: none;  appearance: none;  padding: 7px 15px;  border: 1px solid #333;  border-radius: 2px;  font-size: 24px;}
.target option:first-child {  font-size: 12;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select class="target">  <option value="">select</option>  <option value="1">option 1</option>  <option value="2">option 2</option></select>

change font size of default option of dropdown box

Many browsers will apply default styles to select dropdowns so for your styling to apply you will need to undo this default styling with the following. The variants are for different browsers.

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>