CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jake Chasan
Jake Chasan

Reputation: 6550

Define new Icon Collapsable JQuery

I am trying to define custom icons for the JQuery Collapsable view. I would like to do this without having to modify the default JQuery CSS and .JS files.

Here is a jsFiddle of what I am starting with: http://jsfiddle.net/jakechasan/M7LLU/

I have tried this, but with no success:

#plus .ui-icon {
     background:  url(open.png) 50% 50% no-repeat; background-size: 24px 22px;
}

Here is my desired appearance: (notice a custom icon next to the row title) [Note: this is only a Photoshop mockup]

enter image description here

Does anyone have ideas on how to change this?

Thanks.

Upvotes: 0

Views: 61

Answers (1)

Mathias
Mathias

Reputation: 5672

The selector for the icon set by jQuery Mobile seem to be .ui-icon-plus:after.

If you add that to your own CSS you could override the standard icon. DEMO

.ui-icon-plus:after {
    background: url("http://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg") top center no-repeat;
    border-radius: 0;
}

Upvotes: 1

Related Questions