Css Color Jquery UI

Question

I'm trying to change the color of some jQuery UI sortable using CSS: Check this fiddle:

When I set the .default background all the boxes turn to that color. But when I specify background in each list, the background of the list changes, not the boxes.

How do i specify colors for the boxes?

CSS:

#sortable-5 {
background: #ff0000;
}
#sortable-6 {
background: #00b8ff;
}
#sortable-7{
background: #000000;
}
#sortable-5, #sortable-6,#sortable-7 { 
list-style-type: none; margin: 0; padding: 0;
width: 20%;float:left
}
#sortable-5 li, #sortable-6 li,#sortable-7 li { 
margin: 0 3px 3px 3px; padding: 0.4em; 
padding-left: 1.5em; font-size: 17px; height: 50px;
}
.default {
background: #b2f5fb;
border: 1px solid #DDDDDD;
color: #333333;
}

Nice! Make sure you accept one of the other answers if that has worked for you. — chriz
– chriz, Commented Oct 31, 2014 at 11:41

James Thorpe · Accepted Answer · 2014-10-31 11:34:34Z

1

You need to apply the colours to the LI elements. Since you've added a default class to them, you can use that:

#sortable-5>.default {
    background: #ff0000;
}
#sortable-6>.default {
    background: #00b8ff;
}
#sortable-7>.default{
    background: #000000;
}

Updated fiddle

answered Oct 31, 2014 at 11:34

James Thorpe

32.3k6 gold badges76 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bojan Petkovski · Accepted Answer · 2014-10-31 11:34:15Z

0

To change the background color of the boxes (.default) in each list you need to make it like this

#sortable-5 .default{
    background: #ff0000;
}

Example here http://jsfiddle.net/fwcLd8mg/6/

answered Oct 31, 2014 at 11:34

Bojan Petkovski

6,9511 gold badge27 silver badges36 bronze badges

Collectives™ on Stack Overflow

Css Color Jquery UI

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related