How to restrict the function of a CSS?

0

~ I am adding a multiselect function in a page already created, which presents its own design and its own css. the multiselect also presents its own design ~

~ in the image you can see that it works with two css addresses, the styles.css is the one on the page and bootstrap-multiselect.css is the one I'm adding to design my multiple option. in the second image you can show the page if you only use the multiselect code and not the styles ~

~ the design of the css I am applying to the select "type of tower mantle" which can be seen in this image and shows the values in a normal way, without line space, but as the design looks of the whole page is null, since I have not activated the css style. ~

but when I add the design of the page (style.css), in the login interface does not generate any problem ...

~ but at the moment of viewing the mantle data, the conflict is generated, as the way of showing the values is distorted and a large spacing space is created ~

* ~ then my rule would be if there would be a restriction so that the css of the page (style.css) does not alter the selectMultiple (which is created within a table in html)

    
asked by kev 27.04.2018 в 18:40
source

1 answer

0

Yes, you can, there are different ways to do it, one of the ones I usually use is to add an extra class to the already used global component, for example: I have styles for .multiselect {} , so I add a new class as .multiselect.miselectpersonalizado {} and apply all changes on that parent element.

Suppose you have armed the following bootstrap:

.multiselect {}
.multiselect select {}
.multiselect select option {}

Then I add the new styles but within a new class:

.multiselect.miselectpersonalizado {}
.multiselect.miselectpersonalizado select {}
.multiselect.miselectpersonalizado select option {}

And inside the html:

<div class="multiselect miselectpersonalizado">
  <select>
    ...
  </select>
<div>
    
answered by 27.04.2018 в 19:56