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.

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

 

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

THE DEMO

Plain message
Information message
Successful message
Warning message
Error message

 

THE HTML

1a-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.

 

THE CSS

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

/* 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.

 

 

2) ADDING ICONS

THE DEMO

Plain message
Information message
Successful message
Warning message
Error message

 

THE HTML

2a-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.

 

THE CSS

2b-icon.css
/* 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.

 

 

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

THE DEMO

X

Plain message

X

Information message

X

Successful message

X

Warning message

X

Error message

 

THE HTML

3a-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="cb"> that will act as the close button.

 

THE CSS

3b-close.css
/* [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.

 

 

4) PACKAGED NOTIFICATIONS

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

 

THE DEMO

 

THE HTML

4a-package.html
<!-- (A) LOAD CSS + JS -->
<link href="2a-close.css" rel="stylesheet">
<script src="2b-package.js"></script>
 
<!-- (B) HTML CONTAINER -->
<div id="barwrap"></div>

 <!-- (C) FOR TESTING -->
<script>
window.addEventListener("load", function(){
  jsbar("Plain bar with no extras");
  jsbar("Information", 1, "&#8505;");
  jsbar("Success", 2, "&#9745;");
  jsbar("Warning", 3, "&#9888;");
  jsbar("Error", 4, "&#9747;");
});
</script>

Yep, all the “manual” notification bars are gone in this final example, and we will use Javascript to generate them into <div id="barwrap">.

 

THE JAVASCRIPT

4c-package.js
function jsbar (message, lvl, ico) {
// jsbar() : create a notification bar
// message : notification message
// lvl : (optional) 1-info, 2-success, 3-warn, 4-error
// ico : (optional) icon to add

  // (A) CREATE NEW NOTIFICATION BAR
  let bar = document.createElement("div");
  bar.classList.add("bar");
  switch (lvl) {
    default: break;
    case 1: bar.classList.add("info"); break;
    case 2: bar.classList.add("success"); break;
    case 3: bar.classList.add("warn"); break;
    case 4: bar.classList.add("error"); break;
  }

  // (B) CLOSE BUTTON
  let close = document.createElement("div");
  close.innerHTML = "X";
  close.classList.add("cb");
  close.addEventListener("click", function(){
    bar.remove();
  });
  bar.appendChild(close);
 
  // (C) ICON
  if (ico !== undefined) {
    let icon = document.createElement("i");
    icon.classList.add("ico");
    icon.innerHTML = ico;
    bar.appendChild(icon);
  }
 
  // (D) NOTIFICATION MESSAGE
  let msg = document.createElement("span");
  msg.innerHTML = message;
  bar.appendChild(msg);
 
  // (E) ADD BAR TO CONTAINER
  document.getElementById("barwrap").appendChild(bar);
}

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

 

 

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.

 

INFOGRAPHIC CHEAT SHEET

Custom Error Notification WIth Pure CSS (Click the enlarge)

 

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. Required fields are marked *