Implementation Markdown Options Example html Extending the MD

MFSelector - multi-formatting select tag options

This is a solution to the desire to have <select> drop down lists with its <option> elements have flexible formatting in their text.

The class will create a mimic of any chosen <select>, hiding the original and pushing selected values into the original when changes are made to the mimic, triggering any onchange events that may be attached to the original.

Also handles <optgroup>'s if included.

Also see for a demo that you can play with.


  1. allows multi-formatted select options
  2. enabled placeholder text for select (without necessarily being part of the options list)
  3. automatically collects style of original <select>
  4. automatically positions the new drop-down list popup depending on the size and position and space availability
  5. triggers onChange events attached to the original <select>
  6. more CSS control of styles for <option>'s and <optgroup>'s


  1. drop-down list popup is a fixed position div that cannot exist outside of the browser/frame, and so can never be exactly the same as a natural <select>
  2. slightly different width decisions from natural selects
  3. the drop down arrow will be different from the native arrow (which varies between operating systems)


To implement :

  1. include the mf-styled-selector.js and mf-styled-selector.css

    html  ::  local installation
    <script src="../js/mf-styled-select.js"></script>
    <link href="../css/mf-styled-select.css" rel="stylesheet preload prefetch" as="style">


    html  :: reference
    <script src=""></script>
    <link href="" rel="stylesheet preload prefetch" as="style">

  1. include the mf-select class on any <select>'s that want to apply.
  2. use the special simplified markdown language on <option> entries to control the formatting required for the values; it is also advisable to include the mf-invisible class on your <select> to avoid the pre-formatted value from being visible before it's ready.

    <select class='mf-select mf-invisible'>
      <option>ABC {col .red}DEF{/col}</option>
      <option>HIJ {col .blue}KLM{/col}</option>
      <option>xyz ///italic///</option>
      <option>123 **bold**</option>
      <option>{col #c81fd3}#c81fd3{/col}</option>
      <option>{col red}color:red{/col}</option>

error_outline{/col} Note, if you have any CSS that references your select items (e.g. through select {... '> or specifically pointing at the id of a <select> e.g. #myselect then you will need to make adjustments to use the mf-select instead).

Markdown Options

The special simplified MD includes:

**...** Bolding text
{col xxxx}...{/col}change text color to xxxx (e.g. red or #ff0, or if xxxx starts with . then it will use the class name xxxx (i.e. .xxxx)

Example html

<select class='mf-select mf-invisible' placeholder='{col grey}-Select an option-'>
    <optgroup label='group1'>
       <option>Lorem **ipsum**</option>
       <option>dolor sit amet</option>
    <optgroup label='group2'>
       <option>consectetur {col .myclass}adipiscing elit{/col}</option>
       <option>**Sed eget** libero sit</option>

By default, on window load, the class will be initiated, but if necessary you can call this manually using the init() function after the .mf-select classes have been put on the DOM:

new mfSelector().init();

Extending the MD

Note, the provide MD here is limited but can be extended if desired by declaring your own MD handler to return your desired markup.

function myMDConverter(tx) {
   return tx.replace(/_(.*?)_/g, "<u>$1</u>");
new mfSelector().init(myMDConverter);

link Click to view a demo




Latest Release

Version 1.02023-06-06