Simple Custom Error Messages With Pure CSS

Welcome to a quick tutorial on how to create custom error messages with pure CSS. By now, you should have experienced the intrusive default Javascript alert box. Every time it shows up, users get scared away. So here it is, let us walk through a few examples of “alternative” error notification bars that are more elegant and not as intrusive – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

Download & Notes CSS Only With Some JS
Useful Bits & Links The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

CSS-ONLY ERROR NOTIFICATIONS

Let us start with the raw basics by creating notification bars with just pure CSS and HTML.

 

1) BASIC NOTIFICATION BAR

1A) THE HTML

1-basic.html
<div class="bar">Plain message</div>
<div class="bar info">Information message</div>
<div class="bar success">Successful message</div>
<div class="bar warn">Warning message</div>
<div class="bar error">Error message</div>

That is actually all we need to create a custom error message, an HTML <div> with the notification message inside. Take note of the bar and info | success | warn | error CSS classes – We will use these to build the notification bar.

 

1B) THE CSS

error-bar.css
/* (A) THE BASE */
.bar {
  padding: 10px;
  margin: 10px;
  color: #333;
  background: #fafafa;
  border: 1px solid #ccc;
}

/* (B) THE VARIATIONS */
.info {
  color: #204a8e;
  background: #c9ddff;
  border: 1px solid #4c699b;
}
.success {
  color: #2b7515;
  background: #ecffd6;
  border: 1px solid #617c42;
}
.warn {
  color: #756e15;
  background: #fffbd1;
  border: 1px solid #87803e;
}
.error {
  color: #ba3939;
  background: #ffe0e0;
  border: 1px solid #a33a3a;
}

The CSS is straightforward as well –

  • .bar is literally the “basic notification bar” with padding, margin, and border.
  • .info | .success | .warn | .error sets various different colors to fit the “level of notification”.

Feel free to changes these to fit your own website’s theme.

1C) THE DEMO

Plain message
Information message
Successful message
Warning message
Error message

 

 

2) ADDING ICONS

2A) THE HTML

2-icon.html
<div class="bar">
  <i class="ico">&#9728;</i> Plain message
</div>
<div class="bar info">
  <i class="ico">&#8505;</i> Information message
</div>
<div class="bar success">
  <i class="ico">&#10004;</i> Successful message
</div>
<div class="bar warn">
  <i class="ico">&#9888;</i> Warning message
</div>
<div class="bar error">
  <i class="ico">&#9747;</i> Error message
</div>

To add icons to the notification bar, we simply prepend the messages with <i class="ico">&#XXXX</i>. For those who do not know – That &#XXXX is a “native HTML symbol”, no need to load extra libraries. Do a search for “HTML symbols list” on the Internet for a whole list of it.

P.S. Check out Font Awesome if you want more icon sets.

 

2B) THE CSS

error-bar.css
/* (C) ICONS */
i.ico {
  display: inline-block;
  width: 20px;
  text-align: center; 
  font-style: normal;
  font-weight: bold;
}

Just a small addition to position the icon nicely.

2C) THE DEMO

Plain message
Information message
Successful message
Warning message
Error message

 

 

JAVASCRIPT ERROR NOTIFICATIONS

The above notification bars should work sufficiently well, but here are a few small improvements if you are willing to throw in some Javascript.

 

3) ADDING CLOSE BUTTONS

3A) THE HTML

3-close.html
<div class="bar">
  <div class="close" onclick="this.parentElement.remove()">X</div>
  <i class="ico">&#9728;</i> Plain message
</div>
<div class="bar info">
  <div class="close" onclick="this.parentElement.remove()">X</div>
  <i class="ico">&#8505;</i> Information message
</div>
<div class="bar success">
  <div class="close" onclick="this.parentElement.remove()">X</div>
  <i class="ico">&#10004;</i> Successful message
</div>
<div class="bar warn">
  <div class="close" onclick="this.parentElement.remove()">X</div>
  <i class="ico">&#9888;</i> Warning message
</div>
<div class="bar error">
  <div class="close" onclick="this.parentElement.remove()">X</div>
  <i class="ico">&#9747;</i> Error message
</div>

Not much of a difference here, except that we now add a <div class="close"> that will act as the close button.

 

3B) THE CSS

error-bar.css
/* (D) CLOSE BUTTON */
.bar { position: relative; }
div.close {
  position: absolute;
  top: 30%;
  right: 10px;
  color: #888;
  cursor: pointer;
}

There is not much added to the CSS as well. We simply position the close button to the right of the notification bar, and that’s about it.

3C) THE DEMO

X

Plain message

X

Information message

X

Successful message

X

Warning message

X

Error message

 

 

4) PACKAGED ERROR NOTIFICATIONS

4A) THE HTML

4-js.html
<!-- (A) LOAD CSS + JS -->
<link href="error-bar.css" rel="stylesheet">
<script src="error-bar.js"></script>
 
<!-- (B) HTML CONTAINER -->
<div id="demo"></div>

 <!-- (C) FOR TESTING -->
<script>
let demo = document.getElementById("demo");
ebar({ target: demo, msg: "Plain" });
ebar({ lvl: 1, target: demo, msg: "Information" });
ebar({ lvl: 2, target: demo, msg: "Success" });
ebar({ lvl: 3, target: demo, msg: "Warning" });
ebar({ lvl: 4, target: demo, msg: "Error" });
</script>

The notification bar is has gotten rather messy, and it is a pain to manually copy-paste them. So why not package everything into an easy-to-use Javascript ebar() function?

  • target Target HTML container to generate the error message.
  • msg The error or notification message.
  • lvl Optional, error level.

 

4B) THE JAVASCRIPT

error-bar.js
function ebar (instance) {
// target : target html container
// msg : notification message
// lvl : (optional) 1-info, 2-success, 3-warn, 4-error
 
  // (A) CREATE NEW NOTIFICATION BAR
  let bar = document.createElement("div");
  bar.classList.add("bar");
 
  // (B) ADD CLOSE BUTTON
  let close = document.createElement("div");
  close.innerHTML = "X";
  close.classList.add("close");
  close.onclick = () => { bar.remove(); };
  bar.appendChild(close);
 
  // (C) SET "ERROR LEVEL"
  if (instance.lvl) {
    let icon = document.createElement("i");
    icon.classList.add("ico");
    switch (instance.lvl) {
      // (C1) INFO
      case 1:
        bar.classList.add("info");
        icon.innerHTML = "&#8505;";
        break;
 
      // (C2) SUCCESS
      case 2:
        bar.classList.add("success");
        icon.innerHTML = "&#9745;";
        break;
 
      // (C3) WARNING
      case 3:
        bar.classList.add("warn");
        icon.innerHTML = "&#9888;";
        break;
 
      // (C4) ERROR
      case 4:
        bar.classList.add("error");
        icon.innerHTML = "&#9747;";
        break;
    }
    bar.appendChild(icon);
  }
 
  // (D) NOTIFICATION MESSAGE
  let msg = document.createElement("span");
  msg.innerHTML = instance.msg;
  bar.appendChild(msg);
 
  // (E) ADD BAR TO CONTAINER
  instance.target.appendChild(bar);
}

This may look complicated, but this function essentially just creates all necessary notification bar HTML.

 

4C) THE DEMO

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.