Is it possible to customize an Alert?

Question

Between an if and Else I have a call from an Alert to return a reply to the user, between both the layout of Alert itself is not very according to the layout of the site, I would like to know how I can customize this.

if(ainput5 == false || ainput4 == false || ainput3 == false || ainput2 == false || ainput == false){
    alert('Para finalizar a compra é necessario informar a quantidade de salgados.');
    document.formMonteCaixa.creditCard5.focus();
  }

Answer 1

Short answer: Not

The browser Alert is a simple DOM alert, as described in W3C "show an alert to the user and wait for it to close"; as a rule: there is no specification, although browsers may even let you customize as they do with the scrool bar: https://developer.mozilla.org/en-US/docs/Web/CSS/::-Webkit-scrollbar but this would be out of specification

How to customize (Simple alternative)

You need to make your own Alert and mimic browser behavior by javascript.

example:

Javascript:

<script>
    function customAlert(message) {
        var div = document.createElement("div");
        div.classList.add("custom-alert");
        var close = document.createElement("a");
        close.textContent = "[x]";
        close.classList.add("close"); // para o seu css
        close.addEventListener("click", () => {
            document.body.removeChild(div);
        }, true);
        div.appendChild(close);
        div.appendChild(document.createTextNode(message));
        document.body.appendChild(div);
    }

    customAlert("ola");
</script>

CSS

.custom-alert {
    /* o css do seu alerta */
}

W3C dom Alert: https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#dom-Alert

Answer 2

I use sweetalert, very simple and easy to use. Take a look at the documentation here.