Languages
[Edit]
EN

HTML - select / option / combo box example

11 points
Created by:
JustMike
3494

Using HTML it is possible to create select field (combo box controll) in few ways.

1. select element example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <form name="my-form">
    <label>Fruits: </label>
    <select name="my-fruits">
      <option value="apples">Apples</option>
      <option value="pears">Pears</option>
      <option value="bananas">Bananas</option>
      <option value="grapes">Grapes</option>
    </select>
  </form>
</body>
</html>

2. select element with default selected option example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <form name="my-form">
    <label>Fruits: </label>
    <select name="my-fruits">
      <option value="apples">Apples</option>
      <option value="pears">Pears</option>
      <option value="bananas" selected>Bananas</option>
      <option value="grapes">Grapes</option>
    </select>
  </form>
</body>
</html>

Note: Banana fruit has been selected by default because of used selected attribute.

3. select element with grouped options example

In this example optgroup elemnt usage has been presented.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <form name="my-form">
    <label>Fruits: </label>
    <select name="my-fruits">
      <optgroup label="Sale by weight">
        <option value="apples">Apples</option>
        <option value="pears">Pears</option>
      </optgroup>
      <optgroup label="Sale by quantity">
        <option value="bananas" selected>Bananas</option>
        <option value="grapes">Grapes</option>
      </optgroup>
    </select>
  </form>
</body>
</html>

4. select element with disabled option example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <form name="my-form">
    <label>Fruits: </label>
    <select name="my-fruits">
      <option selected disabled></option>
      <option value="apples">Apples</option>
      <option value="pears">Pears</option>
      <option value="bananas">Bananas</option>
      <option value="grapes">Grapes</option>
    </select>
  </form>
</body>
</html>

5. select element with custom styles example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    select {
    	background: gold;
        font-family: monospace;
    }
    
    option {
    	color: gold;
    }
    
    option:disabled {
    	background: grey;
    }
    
    option[value="apples"] {
        background: red;
    }
    
    option[value="pears"] {
    	background: yellow;
    }
    
    option[value="bananas"] {
    	background: yellow;
    }
    
    option[value="grapes"] {
    	background: red;
    }
    
  </style>
</head>
<body>
  <form name="my-form">
    <label>Fruits: </label>
    <select name="my-fruits">
      <option selected disabled></option>
      <option value="apples">Apples</option>
      <option value="pears">Pears</option>
      <option value="bananas">Bananas</option>
      <option value="grapes">Grapes</option>
    </select>
  </form>
</body>
</html>

 

Hey ūüĎč
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.