Browser has it’s own stylesheet (called user agent stylesheet).

If you inspect your input and select elements, you would see that browser overrides your style, since it has higher specificity:

Simply adding

input, select{
   font-size: inherit;
}

solves the problem.

It would be good idea to add css reboot like this or write your own in separate file. That would solve common problems and make styles less browser-opinionated.

You can do it by defining a separate CSS for select.

select {
  font-size:20px;
}

if you want the same style for both you can add it in style like .drop-down, select {} but it will make it worse as there is padding in your style for the label. it will be applied to the options also this will make your dropdown larger.

.drop-down {
    background-color:white;
    padding:20px;
    display:inline-block;
    padding-right:70px;
    padding-left:70px;
    font-size:20px;
}
select {
  font-size:20px;
}

<div class="drop-down">

        <form action="/action-page.php">

            <label for="cars">Choose a Japanese car:</label>
            <select id="cars" name="cars">
                <option value="Toyota">Toyota</option>
                <option value="Honda">Honda</option>
                <option value="Mitsubishi">Mitsubishi</option>
                <option value="Suzuki">Suzuki</option>
                <option value="Nissan">Nissan</option>
                <option value="Subaru">Subaru</option>
                <option value="Mazda">Mazda</option>
            </select>
            <input type="submit">

        </form>


    </div>

Here’s what I mean.

<div class="drop-down">
    <form action="/action-page.php">
        <label for="cars">Choose a Japanese car:</label>
        <select id="cars" name="cars">
            <option value="Toyota">Toyota</option>
            <option value="Honda">Honda</option>
            <option value="Mitsubishi">Mitsubishi</option>
            <option value="Suzuki">Suzuki</option>
            <option value="Nissan">Nissan</option>
            <option value="Subaru">Subaru</option>
            <option value="Mazda">Mazda</option>
        </select>
        <input type="submit">
    </form>
</div>

and CSS:

.drop-down {
    background-color:white;
    padding:20px;
    display:inline-block;
    padding-right:70px;
    padding-left:70px;
    font-size:20px;

    }

Now, the font-size applies to only the first child-element, which is the label element. Why is it that it doesn’t apply to the rest of the child-elements, i.e. the select and input?

I have to separately target them to change their font-size. I thought that, if I target the parent element, the changes are going to cascade down to all the texts within the parent element, yet it only cascades down to the first child element.

Why is that?