Select dropdown in HTML - Browser Rendering Trace

Render Flow - Select dropdown

[Read <select>] -> [Create SELECT node] -> [Read <option>] -> [Create OPTION child nodes] -> [Add option text] -> [Close OPTION] -> [Close SELECT] -> [Render dropdown UI]

The browser reads the <select> element, creates a dropdown control, then reads each <option> inside it to build the list of choices shown when clicked.

Render Steps - 3 Steps

Code Added:<select id="fruit" name="fruit">...</select>

Before

[Label: Choose a fruit:] 

(no dropdown visible)

→

After

[Label: Choose a fruit:] 
[▼ Select an option ▼]

Adding the <select> element creates a dropdown box with a default prompt for the user to pick an option.

🔧 Browser Action:Creates SELECT form control and reserves space for dropdown UI

Code Sample

A labeled dropdown menu with three fruit options that the user can pick from.

HTML

<label for="fruit">Choose a fruit:</label>
<select id="fruit" name="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

Render Quiz - 3 Questions

After step 2, what text is visible inside the dropdown box before clicking?

A Select an option

B Apple

C Banana

D Cherry

Common Confusions - 3 Topics

Why does my dropdown show the first option instead of a placeholder?

The <select> shows the first <option> by default. To show a placeholder, add an <option> with empty value and 'disabled selected' attributes.

💡 Use <option value="" disabled selected>Choose...</option> as the first option for a placeholder.

Why can't I select multiple options in my dropdown?

By default, <select> allows only one choice. To select multiple, add the 'multiple' attribute to <select>.

💡 Add multiple attribute: <select multiple> to enable multi-selection.

Why is my option grayed out and unclickable?

If an <option> has the 'disabled' attribute, it appears grayed and cannot be selected.

💡 Remove 'disabled' attribute to make option selectable.

Property Reference

Element	Purpose	Default Behavior	Visual Effect
<select>	Creates dropdown menu	Shows first option or placeholder	Box with arrow, clickable to open list
<option>	Defines each choice	First option shown by default	List item inside dropdown
disabled (attribute)	Disables option or select	Option or select not selectable	Grayed out, no interaction
multiple (attribute)	Allows multiple selections	Single choice by default	List stays open, multiple items selectable

Concept Snapshot

The <select> element creates a dropdown menu. Each <option> inside is a choice. The first option shows by default. Add 'multiple' to select many. Use 'disabled' to gray out options. Label with <label> for accessibility.