W3.CSS — Select

Basic Select

<select class="w3-select w3-border">
    <option value="" disabled selected>Choose an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Select Styles

<!-- Bordered -->
<select class="w3-select w3-border">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

<!-- With multiple -->
<select class="w3-select w3-border" multiple>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

<!-- With size -->
<select class="w3-select w3-border" size="3">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Select Examples

<!-- Form with select -->
<form>
    <label>Country</label>
    <select class="w3-select w3-border" name="country">
        <option value="" disabled selected>Select country</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
        <option value="canada">Canada</option>
        <option value="australia">Australia</option>
    </select>
    
    <label>Language</label>
    <select class="w3-select w3-border" name="language" multiple>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
        <option value="python">Python</option>
    </select>
    
    <button class="w3-button w3-blue">Submit</button>
</form>

<!-- Inline select -->
<div class="w3-row">
    <div class="w3-col" style="width:200px">
        <select class="w3-select w3-border">
            <option>Small</option>
            <option>Medium</option>
            <option>Large</option>
        </select>
    </div>
</div>

Select with Optgroup

<select class="w3-select w3-border">
    <optgroup label="Frontend">
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
    </optgroup>
    <optgroup label="Backend">
        <option>Python</option>
        <option>Java</option>
        <option>PHP</option>
    </optgroup>
</select>

Mini Practice

Create HTML code that:

1. Creates a basic select dropdown
2. Adds a multiple select
3. Creates a select with option groups
4. Uses select in a form

Up Next

Next: Learn about W3.CSS Responsive.