Link Search Menu Expand Document
Hybrid HTML Dropdown

Styling

Important to NOTE

  • The colours of the dropdown are programmatically set to those of the page, this is the default which can be overridden with the colourise option setting (see below for more details).
  • The active/selected options in the list are by default set to blue highlight and white font, this can be overridden using CSS, see below for example.

Here is a list of custom styling examples,

Changing colours of the Hybrid dropdown field.

The Hybrid dropdown look is fully customisable using CSS stylesheet rules. The default is for the plugin to seek the parent element font & background colour and programmatically set the colour styles at initialisation.

Active/selected option in the list

The default colours for the active/selected option(s) in the list is a blue hightlight and white font, this can be changed using a CSS rule,

<select id="make-it-pink">
  ...
</select>
<style>
#make-it-pink-hdd .hybriddd-option.active > label,
#make-it-pink-hdd .hybriddd-option > label:hover {
    background: pink;
    color: blue;
}
</style>

NOTE: a <select/> field with an id attribute will have its hybridised field id attribute post-fixed with '-hdd'. open the dropdown to see the result,

Setting the general colour scheme

The plugin is designed to match your form or page colours, however, this can be overruled using the object instantiation option settings or CSS rules.

There are 3 ways to modify/customise the colours of your dropdown,

Setting custom colours: negative effect

You can get the negative effect of the current page colours,

<select id="ex2-hdd" data-negative="true">
  ...
</select>

which results in the reverse colours,

However, this can be customised as per requirements using the following CSS rules that need to be loaded after the plugin stylesheet in order to overrule the default styles,

Setting custom colours: custom colours

You can set the color and backgroundColor at initialisation,

<select id="ex3-hdd" data-color="purple"
data-background-color="lightblue">
  ...
</select>

which results in,

when using the color/backgroundColor options, the plugin will force an id attribute on the hybrid element and embedded a <style/> element into the page that specifically targets that list, this enables each dropdown field to have unique colours should this be desired.

Setting custom colours: CSS overrules

It is important to switch off the plugin’s automatic colourising functionality with the colourise option setting,

<div id="ex4-hdd" data-colourise="false">
<script type="application/json">
  {
    "":"Select a dish",
    "japan":{
      ...
    }
  }
  </script>
</div>
and to setup the following CSS rules, 
      
/* dropdown colours*/
.hybrid-dropdown{
  color:#fff;
  background-color: darkgreen
}
/*hover colours */
.hybriddd-option.active > label:hover,
.hybriddd-option.hover > label,.hybriddd-option > label:hover{
  color:darkgreen;
  background-color: #fff
}
/* checkboxes colours */
:hover > input:checked + .hybridddcb::before{
  color:#fff
}
.hybriddd-option input:checked + .hybridddcb::before {
  background: darkgreen
}
/* scrollbar colour */
ul.hybriddd-options::-webkit-scrollbar-track {
  background:darkgreen
}
ul.hybriddd-options::-webkit-scrollbar-thumb,
ul.hybriddd-options::-webkit-scrollbar{
  background:#fff
}
/*active/selected options in list*/
.hybriddd-option.active > label {
    background: #fff;
    color: darkgreen
}

resulting in,

the dropdown list opens by default below and aligned to the left of the field. Tt is possible to force the dropdown to open aligned to the right, or even above, using classes inserted in the field element. This is useful when you field is at the bottom of a form or on the right side of a page, either cases may result in the default dropdown list not being fully visible.

Force the dropdown right aligned.

add the class hybriddd-right to the field element,

<select class="hybriddd-right">...</select>

Force the dropdown top open above.

add the class hybriddd-top to the field element,

<select class="hybriddd-top">...</select>

Force dropdown above and right aligned.

add the classes hybriddd-right hybriddd-top to the field element, to get both effects combined,

<select class="hybriddd-right hybriddd-top">...</select>

Restrict the dropdown menu size.

the dropdown menu automatically adjust to the content of the list, however, it is by default restricted to 34% of the height of the browser window. This can be controlled with the following CSS rule,

<select id="short-menu">...</select>

NOTE: when converting a <select/> field to a hybrid fiield, the hybridised field will adopt the original field’s id and postfix it with -hdd, this is to ensure that scripts querying of the select field using its id are still able to work.

#short-menu-hdd .hybriddd-wrapper{
  max-height: calc(var(--hybriddd-item-height) * 2);
}

The above style uses the plugin created variable --hybriddd-item-height which can be used to restrict the height of the dropdown to 2 fields only, resulting in,

Display the fields as a grid without a dropdown.

The plugin also has the ability to disable the dropdown and display the fields as a grid, however we can force to display checkboxes to make it more intuitive to a user.

<select id="one-column"
  data-dropdown="none"
  data-checkboxes="true">
  ...
</select>

This forces the list of options to be displayed as a single column grid,

Display the fields as a 2-column grid without a dropdown.

following on from the above example, you can set the number of columns in the grid, using the gridColumns option,

<select id="two-column"
  data-dropdown="none"
  data-checkboxes="true"
  data-grid-columns="2">
  ...
</select>

This forces the list of options to be displayed as a single column grid,