CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
IMB
IMB

Reputation: 15889

How to remove drop shadow in basic links in Jquery Mobile?

<div data-role="page" style="background:#000">
    <a href="http://google.com">test</a>
</div>

As you can see here: http://jsfiddle.net/KCqqN/

Jquery Mobile appears to add a white color drop shadow, how to get rid of that?

Upvotes: 10

Views: 13688

Answers (3)

Masood
Masood

Reputation: 1594

Very simple!

add code below before everything in your CSS:

* {
    text-shadow: none !important;
}

Upvotes: 2

user281058
user281058

Reputation: 151

I would suggest setting your own link css in the head tag, then adding a "text-shadow= none !important;" tag to make sure you override whatever jquery does. And because !important overrides browser accessibility setting, I would also suggest making your text very dark and big and background very light or vice versa so as not to annoy your colorblind/vision-impaired users whose accessibility settings won't work

Upvotes: 0

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66981

In your stylesheet (make sure it is below the jQuery mobile stylesheet)

Simply set the text-shadow yourself, to whatever you want.

.ui-body-c, .ui-overlay-c { text-shadow:0 0 0; }

In the jsFiddle it loads the jquery mobile css afterwards, so if you throw an additional tag in there (or use !important, better not to though) it'll trump it.

body .ui-body-c, body .ui-overlay-c { text-shadow:0 0 0; } // more specificity

http://jsfiddle.net/KCqqN/2/

Upvotes: 13

Related Questions