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>

Answer from PCasagrande on Stack Overflow
🌐
Stack Overflow
stackoverflow.com › questions › 7853130 › how-to-change-the-style-of-alert-box
How to change the style of alert box?
Top answer
1 of 13
157

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>

2 of 13
84

I use SweetAlert, It's Awesome, You will get lots of customization option as well as all callbacks

swal("Here's a message!", "It's pretty, isn't it?");

🌐
W3Schools
w3schools.com › howto › howto_js_alert.asp
How To Create an Alert Message Box
<div class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> This is an alert box.
Videos
10:59
🌐 YouTube
Custom Alert Popup Box using HTML CSS & Javascript - YouTube
August 1, 2019
03:56
🌐 YouTube
How to Create Custom Alert Box in Javascript using SweetAlert JS ...
October 11, 2019
12:14
🌐 YouTube
How to Create Custom Alert Box using Javascript Tutorial - YouTube
October 28, 2024
12:51
🌐 YouTube
Popup Box in JavaScript | Alert Box, Confirm Box, Prompt Box in ...
March 27, 2023
🌐 youtube.com
How to Create a Webpage Alert Using JavaScript – Easy JavaScript ...
February 3, 2022
09:46
🌐 YouTube
How to do JavaScript Popups (alert, confirm, prompt examples) - ...
August 31, 2021
77.1K
View all
View all
🌐
TutorialsPoint
tutorialspoint.com › How-to-create-and-apply-CSS-to-JavaScript-Alert-box
How to create and apply CSS to JavaScript Alert box?
The custom alert box will be created using jQuery and styles will be applied to CSS. You can try to run the following code to learn how to create and apply CSS to alert box − ... <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> ...
🌐
TutorialsPoint
tutorialspoint.com › How-to-design-a-custom-alert-box-using-JavaScript
How to design a custom alert box using JavaScript?
Now will style the button present inside the alert box by providing it color, margin, radius, border, and width. Also align the text to the centre. At last, provide the styling to the text present in the alert box by aligning the text. We can use the below code to create a custom alert box ?
🌐
GeeksforGeeks
geeksforgeeks.org › css › how-to-change-the-style-of-alert-box-using-css
How to change the style of alert box using CSS ? - GeeksforGeeks
July 12, 2025 - But the JavaScript alert box is a system object not the subject of CSS. To design the alert box we need jQuery then by using the only CSS we can do that.
🌐
TutorialsPoint
tutorialspoint.com › How-I-can-change-the-style-of-alert-box-using-JavaScript
How I can change the style of alert box using JavaScript?
To change the style, use the following custom alert box. We’re using JavaScript library, jQuery to achive this. ... <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script> function functionAlert(msg, myYes) { var confirmBox = $("#confirm"); confirmBox.find(".message").text(msg); confirmBox.find(".yes").unbind().click(function() { confirmBox.hide(); }); confirmBox.find(".yes").click(myYes); confirmBox.show(); } </script> <style> #confirm { display: none; background-color: #514E61; color: #FFFFFF; border: 1px solid #aaa;
🌐
Js
alertbox.js.org
AlertBox - A simple, beautiful, responsive, easy to use, customizable text for JavaScript's Alert Box.
alertbox.render({ alertIcon: 'warning', title: 'Thank You!', message: 'AlertBox Popup Message', btnTitle: 'Ok', border:true });
🌐
CodePen
codepen.io › skazee › pen › xVvWdq
Window Alert with CSS Style
var ALERT_TITLE = "Oops!"; var ALERT_BUTTON_TEXT = "Ok"; if(document.getElementById) { window.alert = function(txt) { createCustomAlert(txt); } } function createCustomAlert(txt) { d = document; if(d.getElementById("modalContainer")) return; mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div")); mObj.id = "modalContainer"; mObj.style.height = d.documentElement.scrollHeight + "px"; alertObj = mObj.appendChild(d.createElement("div")); alertObj.id = "alertBox"; if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px"; alertObj.style.left = (d
Find elsewhere
🌐
CSS Script
cssscript.com › home › alert
Latest Free Alert Dialog Boxes In JavaScript & CSS - CSS Script
DemoDownload · Category: Javascript , Notification | January 11, 2025 ... A JavaScript library that creates iOS-style bottom sheets, alert/confirmation/prompt dialogs, toast messages, and notification bars on your website.
🌐
GeeksforGeeks
geeksforgeeks.org › javascript › how-to-design-a-custom-alert-box-using-javascript
How to Design a Custom Alert Box using JavaScript ? - GeeksforGeeks
July 23, 2025 - Create the HTML file with the basic structure including a button to trigger the custom alert box. Then import the SweetAlert2 library by adding the appropriate <link> tag in the <head> section of your HTML file for CSS, and <script> tag before the closing <body> tag for JavaScript...
🌐
Sololearn
sololearn.com › en › Discuss › 2838437 › how-to-style-an-alert-box-in-javascript
How to style an alert box in javascript | Sololearn: Learn to code for FREE!
You can have a look at it: https://stackoverflow.com/questions/7853130/how-to-change-the-style-of-alert-box ... clement ndiok Sweet alert js library is best.
🌐
CodePen
codepen.io › nishanc › pen › NWWPdZE
Custom JS Alert
function CustomAlert(){ this.alert = function(message,title){ document.body.innerHTML = document.body.innerHTML + '<div id="dialogoverlay"></div><div id="dialogbox" class="slit-in-vertical"><div><div id="dialogboxhead"></div><div id="dialogboxbody"></div><div id="dialogboxfoot"></div></div></div>'; let dialogoverlay = document.getElementById('dialogoverlay'); let dialogbox = document.getElementById('dialogbox'); let winH = window.innerHeight; dialogoverlay.style.height = winH+"px"; dialogbox.style.top = "100px"; dialogoverlay.style.display = "block"; dialogbox.style.display = "block"; document
🌐
Speckyboy
speckyboy.com › home › css › 10 free css & js notification alert code snippets
10 Free CSS & JS Notification Alert Code Snippets for Web Designers
February 5, 2025 - Simply titled formrun.js this uses a pure CSS dialog modal to handle error messages when submitting a login form. The best part is that you can apply this to pretty much any form like checkout pages or user settings pages. Here’s a fun little alert box created from scratch by developer Luca Moser.
🌐
Love2Dev
love2dev.com › blog › custom-javascript-alert
JavaScript Alert ⚠💀 Boxes & Customized Alert Banners 🚩 [Tutorial]
The finally negative to these native JavaScript alert dialogs is they cannot be styled or customized.
🌐
Snap! Forum
forum.snap.berkeley.edu › advanced topics
How can I make a custom javascript alert() box like the one in the snap website? - Advanced Topics - Snap! Forum
July 31, 2022 - Ik this is offtopic but I'm making a website and I want to make a custom alert box like the one in the snap website ex:
🌐
University of Washington
washington.edu › accesscomputing › webd2 › student › unit5 › module2 › lesson1.html
Using JavaScript to Show an Alert
After you have added the button, add a new <style> element to the head section of your page, and add a new style for the button element. Use CSS pseudo-classes (:hover, :focus, and :active) to make the button change its appearance when users hover over it with a mouse or tab to it with keyboard.
🌐
Stack Overflow
stackoverflow.com › questions › 52902344 › alert-box-with-css
Alert Box with CSS
Top answer
1 of 3
2

The problem is you're using the alert function:

alert("Please Fill Up Required Field");

You can't style this - it's a browser-generated box. You need to use a modal box, and then you can style it.

2 of 3
1

In the W3schools example, they are not adding the CSS attributes to the alert element, but to a class on a div:

<div class="alert">

I'd recommend going their route and just making a Div appear to be an alert by changing the CSS.

🌐
Stack Overflow
stackoverflow.com › questions › 11528845 › how-do-i-style-the-alert-box-with-css
jquery - How do I style the alert box with CSS? - Stack Overflow
Top answer
1 of 5
8

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>

​

2 of 5
6

Instead of built-in Javascript dialog box popups - that are ugly and impossible to customize with CSS - I would recommend using jQuery dialog box controls. Those can be styled easily, and jQuery ships with many built-in themes for it, too.

http://docs.jquery.com/UI/Dialog

🌐
Stack Overflow
stackoverflow.com › questions › 68598678 › javascript-html-custom-alert-box
JavaScript & HTML Custom Alert Box - Stack Overflow
Top answer
1 of 1
4

There were two main problems:

  1. You were creating the dialog <div /> but you weren't actually appending it to the document
  2. You were defining alert but you weren't actually calling it anywhere

I've fixed these two things in the below snippet:

function alert(title, content) {
  var alertContent = `
    <div class="modal__overlay verdana">
      <div class="modal__window">
        <div class="modal__titlebar">
          <span class="modal__title">${title}</span>                        
          <button class="modal__close">X</button>                    
        </div>                     
        <div class="modal__content">${content}</div>
      </div>
    </div>`
  var dialogBox = document.createElement("div");
  dialogBox.innerHTML = alertContent;
  document.body.appendChild(dialogBox); // actually append it
}

alert('hello', 'hello world'); // call it here
.verdana {
  font-family: Verdana;
}

.modal__overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000000000000000000;
}

.modal__window {
  max-width: 500px;
  background: #ffffff;
  border: 1px solid #ffffff;
  font-size: 16px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}

.modal__titlebar {
  height: 40px;
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal__title {
  margin-left: 15px;
  font-weight: bold;
  color: #eeeeee;
}

.modal__close {
  width: 40px;
  height: 40px;
  outline: none;
  border: none;
  background: transparent;
  color: #eeeeee;
  cursor: pointer;
}

.modal__close:active {
  transform: scale(0.9);
}

.modal__content {
  padding: 15px;
  font-size: 0.9em;
}

Two other things to consider:

  1. You don't need to use string concatenation when using template literals; you can simply embed the expression
  2. Window.alert is a predefined function which you are potentially shadowing with your own function; I'd recommend giving it a different name.
🌐
Delft Stack
delftstack.com › home › howto › javascript › javascript customize alert box
How to Create Customized Alert Box in JavaScript | Delft Stack
February 2, 2024 - ... Get the HTML body element. Get the alert container. Use the removeChild method to remove the alert container from the HTML body element. Finally, create CSS styles to style the custom alert function.