Advanced Search

css message boxes for different types

/ Published in: CSS
Save to your folder(s)
A simple message box created with only one div container with background and border color, some margin and padding for position the text message nicely, I set the width for 500px, you can change it to auto or any fixed value you want.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. .error_msg_001, .success_msg_001, .info_msg_001, .warning_msg_001{
  3.  width: auto;
  4.  height: auto;
  5.  margin: 1px;
  6.  padding: 2px 4px;
  7.  text-align:center;
  8.  font: bold 15px Arial,sans-serif;
  9.  }
  10.  
  11. .error_msg_001{
  12.  border:solid 1px #FBD3C6;
  13.  background:#FDE4E1;
  14.  color: #B10009;
  15.  }
  16.  
  17. .success_msg_001{
  18.  border: solid 1px #ADDE5C;
  19.  background: #DFF2BF;
  20.  color: #008000;
  21.  }
  22.  
  23. .info_msg_001{
  24.  border:solid 1px #46B6EC;
  25.  background:#BDE5F8;
  26.  color: #00529B;
  27.  }
  28.  
  29. .warning_msg_001{
  30.  border:solid 1px #FDDD5B;
  31.  background:#FEEFB3;
  32.  color: #9F6000;
  33.  }
  34. </style>
  35.  
  36. <div id="msg_1" class="error_msg_001">
  37.  Error: This username is not available.
  38. </div>
  39.  
  40. <div id="msg_2" class="success_msg_001">
  41.  Your account has been created successfuly.
  42. </div>
  43.  
  44. <div id="msg_3" class="info_msg_001">
  45.  Important information for your account.
  46. </div>
  47.  
  48. <div id="msg_4" class="warning_msg_001">
  49.  Warning: please update your profile information.
  50. </div>

URL: http://function-code.blogspot.com/2012/12/css-message-boxes-for-different-types.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.