fatherazrael fatherazrael - 3 months ago 15x
jQuery Question

Why CSS !important is not working in my use case?

Functionality: To change background color of disabled from grey to white.

Opted Solution:
I have added a class in CSS shown below:

background-color: white !important; //As Pure CSS API also have rules for disabling so i mark it as important

I have added following code in JQuery which disable select on base of :

$("#listOfFruits").attr('disabled',(fruitsListSize === 0)); //This fuitsListSize is returning 0 in my case, so it will be true
$('#listOfFruits').addClass((fruitsListSize === 0)?"whiteBackground":""); //listOfFruits is name of <select>

The above code does not work.

I have checked using Firebug and found following code of Pure CSS is getting implemented and my class is not in the list.

.pure-form select[disabled]{
background-color: grey (code);
cursor: not-allowed;

HTML shows my class name:

<select multiple="multiple" style="width:250px" name="listOfFruits" id="listOfFruits" disabled="disabled" class="whiteBackground">


following code worked perfectly for me:

.pure-form select[disabled].whiteBackground {
background:white !important ;