Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(