在动态生成的元素中覆盖CSS

Question

I'm using bootstrap-select , which adds div on top of select . In other terms, I define:

<select id="@Html.IdForModel()" 
    name="@Html.NameForModel()" 
    class="selectpicker form-control" 
    data-live-search="true"></select>
...

 var selectBox = $('#@Html.IdForModel()');
 selectBox.selectpicker()

But in the page with Developer Tools I see:

<div class="btn-group bootstrap-select form-control">
  <button .../>
  <div class="dropdown-menu open" .../>
  <select .../>
</div>

Now I need this outer div to be "display:block" , this fixes some layout problems I experience. But btn-group and bootstrap-select both apply "display:block-inline" .

I've tried:

• Defining my own style for bootstrap-select in separate css file
• Adding !important to my definition
• selectBox.parent().addClass("select-parent-div"); , with my css having: .select-parent-div{display: block !important}

The only thing that has worked is selectBox.parent().css("display", "block"); but I would really like to have my styles in css files. Why doesn't css apply and what can I do about that?

Answer 1

You need to check if the style that apply bootstrap is marked as !important in this case css will not take your style in consideration.

I faced this problem before and the trick that is work is to create the same style with the same name of bootstrap in your page and change the properties as you like.