Styling Filled Filters

You can style any (or all) of the Filter(s) when they have value, the lib will automatically add a filled CSS class which you can style as you see fit. There is no style by default, if you wish to add styling, you will be required to add your own.

Styled Example

Code example

For example, the print screen shown earlier was styled using this piece of SASS (.scss) code. Also note that the demo adds a Font-Awesome icon which can be used with font-family: "FontAwesome" and the relevent unicode character, for example the filter icon is content: "\f0b0". You can basically add a lot of different styling to your populated filters.

$filter-filled-bg-color: darkorange;

.search-filter.filled {
  // color: rgb(189, 104, 1);
  // font-weight: bold;
  background-color: $filter-filled-bg-color;
  .ms-choice {
    // color: rgb(189, 104, 1);
    // font-weight: bold;
    background-color: $filter-filled-bg-color;
  }


  input, input.flatpickr-input {
    // border: 1px solid darken(rgb(204, 204, 204), 15%) !important;
    // color: rgb(189, 104, 1);
    // font-weight: bold;
    background-color: $filter-filled-bg-color !important;
  }
  /*
  &.ms-parent, .flatpickr > input, .input-group > input {
    border: 1px solid darken(rgb(204, 204, 204), 15%) !important;
  }
  */

  div.flatpickr:after, button > div:after, & + span:after, .input-group > span:after {
    font-family: "FontAwesome";
    font-size: 75%;
    content: " \f0b0";
    position: absolute;
    top: 2px;
    right: 5px;
    z-index: 1000;
    color: #ca880f;
  }

  .ms-choice > div:after {
    top: -4px;
    right: 16px;
  }
  & + span:after {
    top: 6px;
    right: 10px;
  }
}