Custom CSS for scan box

[jahnavi310]

Hi there,

I am using the pro mode to get a custom overlay for the qr code scanner. I am running into issues on trying to override the CSS for the scan box.

I am for some reason not able to style the qr-shaded-region div, is there a way i can override the CSS for the scan box with something custom?

Thanks in advance

[YTKowshik]

@jahnavi310 take a look at the issue #429. It may help you.

[sarukomine]

You can remove them and add your own element with custom class into the scan box element.

qrScanner.start(......).then(() => {
    let overlayElement = document.getElementById('qr-shaded-region');
    let childElements = overlayElement.querySelectorAll('div');

    // Remove corners
    for (let childElement of childElements) {
        childElement.remove();
    }

    // Create own corner elements
    let leftTopElement = document.createElement('div');
    let leftBottomElement = document.createElement('div');
    let rightTopElement = document.createElement('div');
    let rightBottomElement = document.createElement('div');

    leftTopElement.classList.add('custom-corners-css');
    leftBottomElement.classList.add('custom-corners-css');
    rightTopElement.classList.add('custom-corners-css');
    rightBottomElement.classList.add('custom-corners-css');

    overlayElement.appendChild(leftTopElement);
    overlayElement.appendChild(leftBottomElement);
    overlayElement.appendChild(rightTopElement);
    overlayElement.appendChild(rightBottomElement);
});

[mebjas]

Marking this as a duplicate of #389

Let's have more discussion there.

[fyrus7]

You can remove them and add your own element with custom class into the scan box element.

qrScanner.start(......).then(() => {
    let overlayElement = document.getElementById('qr-shaded-region');
    let childElements = overlayElement.querySelectorAll('div');

    // Remove corners
    for (let childElement of childElements) {
        childElement.remove();
    }

    // Create own corner elements
    let leftTopElement = document.createElement('div');
    let leftBottomElement = document.createElement('div');
    let rightTopElement = document.createElement('div');
    let rightBottomElement = document.createElement('div');

    leftTopElement.classList.add('custom-corners-css');
    leftBottomElement.classList.add('custom-corners-css');
    rightTopElement.classList.add('custom-corners-css');
    rightBottomElement.classList.add('custom-corners-css');

    overlayElement.appendChild(leftTopElement);
    overlayElement.appendChild(leftBottomElement);
    overlayElement.appendChild(rightTopElement);
    overlayElement.appendChild(rightBottomElement);
});

Anyone got an idea how to do this? I cant shape the shade region