How to Override JS applied CSS

Question

I am using 3rd party multi select dropdown. If you heard of select2 you get idea. Multi Select dropdown is creating through JQuery called select2.min.js and dropdown width is auto calculating. How to apply static with on it because js applied css are the highest prior as per my knowledge.

Following the JQuery generated code

<span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" data-select2-id="1" style="width: 323px;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-disabled="false">
  <ul class="select2-selection__rendered">
    <li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="searchbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li>
  </ul>
</span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>

Answer 1

Use the !important attribute to your CSS.

Answer 2

there are several ways how to delcare CSS and each of them has its own priority. In your case simple adding.important into css class could fix it. However if you wish to change the value in future you may struggle.

You can try to change the css value with Jquery.css() function, see if it helps. If not you can try to write more specific selecotr in css, which has higher tier of priority than the default one from the library.