jquery mobile collapsible, wanna get rid of header "glow"...

LordNorbury

Hi folks,

Am cruising nicely along my new jquery mobile learning curve, I'm using JQM 1.4.5, I have a collapsible on my view, I can't seem to get rid of this "glow" that is on the header, I've tried the following in my CSS:

[HTML]
.ui-collapsible-header {outline: none;}
.ui-accordion-header {outline: none;}

.accordion a:focus
{ outline: none; }
.accordion a:active
{outline: none;}
[/HTML]

Have also tried

style="-moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important;" in my collapsible DIV view and also tried forcing it to style like this using a <h3 style="-moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important;"> in my collapsible code in my view but to no avail...

Have tried Googling the shít out of this but no luck, am hoping someone can point me in the right direction!

EDIT: also tried: data-iconshadow="false" although I think this is for something else like a background shadow, not an outline "glow" as I am trying to get rid of.

LordNorbury

OP here, also tried rebuilding my theme using themeroller to see if I could turn off this "glow" there but it seems that you can't do that.

colm_c

Can't you just inspect element in Chrome / Firefox and see what the rule is and over ride it in your custom CSS?

Bear in mind on some browsers, the 'glow' is a focused element which you can't do much about.

Are you seeing this on real devices or just your desktop browser?

LordNorbury

colm_c wrote: »

Can't you just inspect element in Chrome / Firefox and see what the rule is and over ride it in your custom CSS?

Bear in mind on some browsers, the 'glow' is a focused element which you can't do much about.

Are you seeing this on real devices or just your desktop browser?

Yeah it's not visible now on my iPhone but on my desktop it is still there...

Talisman

The CSS rules are applied in the order which best describes the element. If two rules are the same then the second rule overrides the properties set by the first.

A style rule in the theme CSS file such as

.ui-page-theme-a .ui-btn:focus {}

would better describe the element than your rule

.accordion a:focus {}

if there was an enclosing container with the class ".ui-page-theme-a". The use of such theme classes is how the theme style is applied in jQuery Mobile.

Have you checked for such rules in the provided theme styles? You'll need to override it with your own rule.

LordNorbury

Talisman wrote: »

The CSS rules are applied in the order which best describes the element. If two rules are the same then the second rule overrides the properties set by the first.

A style rule in the theme CSS file such as

.ui-page-theme-a .ui-btn:focus {}

would better describe the element than your rule

.accordion a:focus {}

if there was an enclosing container with the class ".ui-page-theme-a". The use of such theme classes is how the theme style is applied in jQuery Mobile.

Have you checked for such rules in the provided theme styles? You'll need to override it with your own rule.

Gonna check this now, thanks for the heads up!