payal_suthar payal_suthar - 4 months ago 12
Javascript Question

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.

Answer

Here the solution....

Css

.input-block {
  position: relative;
}
.error-block {
  position: absolute;
  top: 100%;
  left: 50px;
  border:1px solid orange;
  border-radius:4px;
  width:250px;
  background-color:white;
  font-size:14px;
  padding:10px;
}
.error-block::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px;
  border-color: transparent transparent orange;
}
.error-icon {
  width:18px;
  text-align:center;
  background-color:darkorange;
  color:white;
  font-weight:bold;
  font-size:14px;
}

Html

<div class="input-block">
  Name:<input type="text" placeholder="name" id="name">
  <div class="error-block"><span class="error-icon">!</span>Please fill out this field.</div>
</div>