Anyone add a label on this MivaPay field?

[dreamingdigital]

Has anyone figured out a way to add an HTML <label> tag around the "Store This Card For Future Use" checkbox in the MivaPay iFrame on OPAY? I've tried a few things but browser security policies seem to be blocking me - at least at my JS level.

[AHerb]

You can not modify HTML there. And the amount of wrappers and containers provided are just... not enough.

I did some modifications with css, but of course you can not add <label> tags.
Have a look at CSS ::before and ::after, where you can add content: '...'

this may help

[dreamingdigital]

I see how the CSS for the Miva pay iFrame is a JSON object - which is cool I think. I emailed Brennan and he said he would notify the team in charge of the next release cycle.

[AHerb]

Oh, btw. It's not obvious, but you can also use @media there

{
    "at-rule": "media",
    "media": "(max-width:500px)",
    "selectors":
    [
        {
            "selector": "label",
            "properties": {
                "display": "block",
                "width": "100%"
            }
        },
        {
            "selector": "input[type=\"text\"]",
            "properties":
            {
                "width": "calc(100% - 28px)",
                "min-width": "calc(100% - 28px)"
            }
        },
    ]
}

[dreamingdigital]

Crazy. :)

I wish I could add actual HTML though - so clicking the text checks the checkbox. No amount of CSS is going to fix that... or is it??! Can you have an :after element on a checkbox?? Then hide the text that's there? would a :before element on a checkbox check the checkbox... ok don't have time right now.

[AHerb]

No ::before and ::afters for the checkbox'es, as there is no content

[dreamingdigital]

https://jsfiddle.net/vhw45fps/11/

That's a start. But it's cross-browser buggy because they all do whatever they want for built-in fancy checkbox styles now. Win10 FireFox seems to be the only one that gives the desired effect. Does that trigger any ideas?

[Brennan]

We have a bug to add labels to the inputs for MivaPay. If there are other HTML changes you would like to see for more advanced styling let me know.

[AHerb]

Please, wrap all elements with divs.
All grouped elements with another set of divs.
No need to give class names to new wrappers, as elements may be reached via css hierarchy.

As long as we don't have access to change the form layout, ideally we should be able to re-position everything with some extra display: table or display: flex if we decide so. So extra element and group wrappers are crucial.

[BeAccessible]

We need to make the checkout form accessible and in compliance with WCAG 2.1. Is there anyway to add error notifications to the fields in the MivaPay iframe? We need more than just a style change.