0

I tried to make work my library and I found that "background-color" CSS property not work when it used by jQueryUI. On the other hand if I simple use the "background" property with color value.
I make examples on jsfiddle:
- Working example
- Not working example
However is I simply make a class and apply to a div element in the html markup it works well.
Code: HTML markup. Same in both cases: 

<div id="selectable">
  <div class="ui-widget-content">1</div>
  <div class="ui-widget-content">2</div>
  <div class="ui-widget-content">3</div>
</div>

Javascript. Also same in both case: 

$(document).ready(function(){
    $("#selectable").selectable();
});

CSS working scenario: 

.ui-selected
  {
    background: rgb(255,0,0);
    border: 1px solid yellow;
    width: 100px;
    height: 30px;
  }

CSS non-working scenario: 

.ui-selected
  {
    background-color: rgb(255,0,0);
    border: 1px solid yellow;
    width: 100px;
    height: 30px;
  }
Péter
  • 2,161
  • 3
  • 21
  • 30

1 Answers1

0

LIVE DEMO

hi Peter, try putting the id in front of css, then it works. 

  #selectable .ui-selected { background: rgb(255,0,0); color: white; }
Ali Çarıkçıoğlu
  • 1,304
  • 1
  • 12
  • 21
  • Hi, Ali. Thanks for the answer but the problem is that if I use the background-color property then it's not working. If I use the background property it works fine without the id selector part. – Péter Aug 14 '13 at 08:58
  • Peter, why do you want to use background-color property when background just works fine? – Ali Çarıkçıoğlu Aug 14 '13 at 09:15
  • If I only want to set the color of the background I usually use the exact property. For me it's much easyer to see/change. And I'm really curious what is the problem with the background-color propery in this case. – Péter Aug 14 '13 at 14:37