Search code examples
jqueryhtmlcssmessageboxrequiredfieldvalidator

Creating a warning message box using css

I want to create a warning message box for required field using css which should be exactly like this - This is what i want

So far I have achieved this something like this-https://jsfiddle.net/payalsuthar/352k4ope/ Here is my html code-

Name:<input type="text" placeholder="name" id="name"><br>
<div id="errname"><p id="sym">!</p>Please fill out this field.</div>

Address:<textarea></textarea>
<input type="submit" value="submit" />

Here is my css -

#errname{
  border:1px solid orange;
  border-radius:4px;
  width:250px;
  margin-top=100px;
  background-color:white;
  font-size:15px;
  padding:10px;
}
#sym{
  width:18px;
  text-align:center;
  background-color:darkorange;
  color:white;
  font-weight:bold;
  font-size:14px;
  border:1px solid white;
}

But I want it to be exactly like the above image, I don't mind if it overlaps the next field and it should appear at the same position as in the above image.I know this is html required field validator message box but it is not working fine with me so I am creating one exactly like that. Thanks in advance.

Solution

  • Try this https://jsfiddle.net/352k4ope/4/

    #name {
  position: relative;
}

#name::before {
  position: absolute;
  top: 20px;
  left: 60px;
  content: '';
  display: block;
  width: 0; 
  height: 0; 
  line-height: 0;
  font-size: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;

  border-bottom: 10px solid white;
}

#name::after {
  content: url('http://67.media.tumblr.com/fdeec9480199afb3c6ed9c24b2aec9c5/tumblr_oaayc9r25Z1vaudwko1_75sq.png')'  Please fill out this field.';
  font-family: arial;
  font-size: 14px;
  line-height: 50px;
  padding: 0 10px;
  vertical-align: top;
  width: 170px;
  height: 50px;
  position: absolute;
  background-color: white;
  top: 30px;
  left: 50px;
}