Can someone point me out how to apply a class to only specific elements?
Here is my problem. I use Stripe elements which applies its own CSS to input fields like form, button, and others.
But this is messing up my bootstrap template.
Renaming the fields for my stripe form in the HTML template has the negative side effect that its JS and other functions stop working. Stripe inserts its elements with an iframe on the fly with JavaScript, so renaming the <button to something or the submit ID makes some function to stop working.
Basically my problem is that I cannot change the names for Stripe. Is there a way with CSS to apply a specific .css file only to a specific part of the HTML page? That way those CSS elements only apply to that specific form but not to the rest of the page.
It is not so easy to interfere with the content of an iframe - the content is coming from another server (presumably in this case Stripe’s) and to change the design of elements within the iframe you’d need to add some CSS to the document being loaded on the remote server. But equally, the content of the iframe has an equally hard time messing with your own page content - so unclear how the iframe is messing with your page layout.
You should be able to change the appearance of the iframe itself, which might help a bit: if the issue is a layout one for example you should be able to control the size / shape of the iframe itself using CSS layout tools (e.g. flex / grid etc.).
There are several answers to this question (it seems) on stackexchange (e.g. here) - might be worth scanning some of those for ideas?
HTH
I don’t think that is possible for security reasons, this is why Stripe inserts the iframe in the first place.
Even if I was able to manipulate the iframe, the thing is that changing the CSS fields to another name, actually breaks the server-side integration with Stripe, at least on my side, you cannot submit the form anymore.
Here is the specific CSS code: https://stripe.com/docs/payments/integration-builder
If you check the CSS global file, the names are very generic when it comes to styling, I did change most of them, but the ones that are giving me issues are:
form input button
Changing then to something like input-stripe, button-stripe, makes the whole code buggy. You cannot submit the card anymore and other issues.
I solved the <button> tag by adding the style as inline CSS.
<button style….very…long”>
It’s not very clean because it’s very long in terms of style attributes. But it seems this works because it’s applying the style only for this particular submit button, as opposed to the style.css which applies to the whole page.
Is there maybe a way to do the same from the .css file? Tell it only apply to this specific button only?
What inline CSS is precisely what I was trying to achieve in the .css code. To only apply that CSS property to only that specific element and nothing else on the page.
There are several ways to directly target an element in CSS - you can get very very specific if you want to. I would think it likely that any element in a fixed layout can be selected uniquely and directly (though I guess there might be edge cases where this is not true I can’t think of one).
One route is to attach a unique identifier to the element you want to target via a unique ID or Name or Class - then you are able to write rules that specifically target that element.
The other route is to identify something unique about the location of the target element on the page and build a selector that uses the location information to identify the element.
CSS Combinators (e.g. >
and +
) are useful when building such very specific selectors, though the downside of such methods is that if the layout of the page changes your selector may break.
You can also do neat things using the various pseudo-classes (e.g. :nth-child
).
Finally the ability to specify multiple selectors for a rule (via the selector list) is handy as you can cover off a variety of possible routes to your chosen element.
HTH
Hi vw000,
Just adding on to what JCOGS is saying…
To target specific elements or override any existing CSS, you don’t actually need to change any of the class/id names of the elements themselves (especially when it can break JavaScript). What I like to do is wrap the HTML I want to specifically target with a parent element that I can assign a class to. See below…
<button>blue text</button>
<div class="parent">
<!-- Form Code Here -->
<button>red text</button>
</div>
In your CSS, you can now specifically target the child elements (or everything inside of the parent) separate from the rest of the page…
button {
color: blue;
}
.parent button {
color: red;
}
The above would make all buttons have blue text, and any buttons that are children of .parent
will override that rule and have red text. In CSS, this is called “Specificity” and it is a rule that determines the priority of how styling is applied. There is a great article about this on CSS-Tricks called “Specifics on CSS Specificity” that I recommend you check out! In a nutshell, the more specific you are in how you target elements, the higher the priority of your style declarations.
After reading through this Stripe documentation, if you have access to the client.js
file you can change the styling of some of the injected elements there. I believe that this is how Stripe intends for you to be able to safely accomplish your goals without compromising the security of the form.
Hope this helps! Best of luck to you!
—DXC
Packet Tide owns and develops ExpressionEngine. © Packet Tide, All Rights Reserved.