Change font-size based on selected option

Question

I would like the first-child in the option to have a different font-size. I'm trying various methods but it isn't happening. So far, I've got this:

JSFiddle: https://jsfiddle.net/2n9cfyo0/1/

I want it to appear this way by default (this is the first-child):

but change the font-size to 24px when the dropdown is chosen:

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;
}

<select class="target">
  <option value="">select</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
</select>

Your `.target option:first-child { font-size: 12; }` is missing the units — Diogo Peres, Oct 14 '19 at 17:33
So basically what you want is a font size of 12px by default, and becoming 24px once an option is chosen? — Anis R., Oct 14 '19 at 17:40
Possibly more info here https://stackoverflow.com/questions/8619406/css-selected-pseudo-class-similar-to-checked-but-for-select-elements — mplungjan, Oct 14 '19 at 17:45
@mplungjan Why would you downvote and locked my question? This is very-very different from what you have linked. I want the font-size changes in the dropdown itself. Not in another div. — Elaine Byene, Oct 14 '19 at 17:53
@mplungjan No. There's nothing remotely similar to my question. — Elaine Byene, Oct 14 '19 at 17:55
@ElaineByene then a possible way is to use an `onchange` event, that fires whenever the selected value has changed, and change the font size in the event handler. — Anis R., Oct 14 '19 at 17:58
@mplungjan? Hello? Why blocked my question when your suggested question isn't remotely similar to mine? — Elaine Byene, Oct 15 '19 at 07:37
I did not downvote. I have reopened your question, but the answer is very likely "not possible" using only CSS — mplungjan, Oct 15 '19 at 07:43

score 2 · Accepted Answer · edited Oct 15 '19 at 08:09

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>

Thanks. I made some changes to make it work the way I want `if (document.getElementById("dropdown_change").value != "")` and it's working well. however, When I choose `select`, it doesn't revert to the original size. Any idea? — Elaine Byene, Oct 15 '19 at 11:31
@ElaineByene Here is my updated [fiddle](https://jsfiddle.net/nm10fkrc/) . If this solution worked, don't forget to up vote too :D — Bilal Ahmed, Oct 15 '19 at 11:48

Change font-size based on selected option

1 Answers1