How to Change the Style of Alert Box

How to change the style of alert box?

The alert box is a system object, and not subject to CSS. To do this style of thing you would need to create an HTML element and mimic the alert() functionality. The jQuery UI Dialogue does a lot of the work for you, working basically as I have described: Link.

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>jQuery UI Dialog - Default functionality</title>  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  <link rel="stylesheet" href="/resources/demos/style.css">  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  <script>  $( function() {    $( "#dialog" ).dialog();  } );  </script></head><body> <div id="dialog" title="Basic dialog">  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p></div>  </body></html>

How can I customize an alert in JavaScript?

What you may want to look for is a modal box,
as you could style that so display alerts.

This page can help you get started:
https://www.w3schools.com/howto/howto_css_modals.asp

Or look into bootstrap which simplifies modals a lot:
https://getbootstrap.com/docs/4.0/components/modal/

How do I style the alert box with CSS?

Try jQuery UI located here: http://jqueryui.com/demos/dialog/

They have a theme roller where you can style the dialog and modal boxes.

-- EDIT --

Answering your second question.

Check out the jsFiddle here: http://jsfiddle.net/8cypx/12/

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />

<div onclick="check_domain_input()">Click</div>

<div id="dialog" title="Attention!" style="display:none">
    Please enter a domain name to search for.
</div>

<script>
    function check_domain_input()
    {        
        $( "#dialog" ).dialog(); // Shows the new alert box.

        var domain_val = document.getElementsByName('domain');

        if (domain_val[0].value.length > 0)
        {
            return true;
        }

        $( "#dialog" ).dialog();

        return false;
    }
</script>

Change the styling of default alert box

You can't. They are native to the browser and are not styl-able.

You should turn to javascript alert-like systems. Using jQuery, here are some:

jAlert
jQuery UI dialog (with some tweaking)
This page proposes three alternatives to native alert/confirm/prompt

This answer shows a way to have a confirm-like blocking dialog using jquery ui dialog

How to Change the Style of Alert Box