jQuery code embedded in a Drupal page has its css overridden

1
votes

I developed a simple js / jQuery only web application that's entirely contained in its own div, meant to go on a Drupal page. The Drupal page only has html in it that loads the jQuery library, loads my javascript file, and sets up the div for the dynamic elements that my code creates to go.

<html>
<head>
<script ...load jquery from google cdn</script>
<script ...load my javascript</script>
</head>
<body>
<div id='my_div'></div>
</body>
</html>

The code executes just fine, except for the lines which change the css. The Drupal theme sets all input divs to a strange color that I'm trying to change. I'm not allowed to change the Drupal theme overall. Calls such as

$("input").css("border", "3px solid red");

don't change anything (all of these calls are also within the .ready() function).

Is there anyone familiar with Drupal and jQuery that can tell me how to override certain Drupal CSS rules on just this page?

2
jquerycssdrupal
Well I don't see any input tags... – Explosion Pills
All input tags are dynamically created by the script. On .ready() my code appends input tags to #my_div – David
Do you have sample css and generated html then? Or a working jsfiddle with the problem. That would really help to see what the exact problem is. – Willem
@David in that case you either have to create a CSS rule that the inputs will follow or change the style when the inputs are dynamically created – Explosion Pills

2 Answers

0
votes
$("input").css("border", "3px solid red !important");

Maybe?

update: Apparently that's not possible. How to apply !important using .css()?

0
votes

I guess Drupal uses !important to overrule the jquery applied css. If that css is applied using a class then you can use jquery's removeClass() to remove those styles. Your example code lacks the details to see if that helps.