Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Customize select2 option CSS doesn't run


hello,

i try to customize select2 option CSS in metronic 8, without success.
What's wrong ?


<select class="form-select form-select-solid mb-2" name="regroupements" data-control="select2" data-placeholder="Select something" data-allow-clear="true" multiple="multiple">
<option></option>
{% for niv1 in niveau1 %}
<option value="{{ niv1.id }}">{{ niv1.caption }}</option>
{% for niv2 in niveau2 %}
<option class="l2" value="{{ niv2.id }}" >{{ niv2.caption }}</option>
{% endfor %}
{% endfor %}
</select>




.l2 {
padding-left:20px !important;
}


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

Please note that according to HTML/CSS specifications the OPTION tag can not be styled.

Select2 uses DIV tags to create a customized dropdown menu based on the standard select element markup and you can style those custom DIV elements of the Select2 dropdown.

if you can explain your requirements we will give you show directions.

In the meantime you can check the Select2's available options in the Metronic Select2 documentation.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(