A CodePen by Avaz Bokiev. Input validation Hack using CSS

index.html

<form action="#">
  <div>
    <input type="email" name="email"  id="name" placeholder="Email" autocomplete="off" required />
  </div>

  <div>
    <input type="submit" value="Submit" />
  </div>
</form>  

style.css

body{
  background: #333;
  width: 340px;
  height: 500px;
  margin: 0 auto;
  padding: 30px;
}
::-webkit-validation-bubble-arrow {
    display: none;
}

::-webkit-validation-bubble{
  transition: .1s linear;
}

input[type="email"]::-webkit-validation-bubble-message {
  background: transparent;
  min-width: 350px;
  position: absolute;
  margin-top: -22px;
  margin-left: 250px;
  padding: 1px;
  border: none;
  box-shadow: none;
  border-radius: 0px;
}

input[type="email"]::-webkit-validation-bubble-text-block{
  display: none;
}



input::-webkit-validation-bubble-icon {
  background: url(http://files.softicons.com/download/web-icons/web-red-buttons-by-axialis-team/png/16/Email.png);
  background-size: 16px 16px;: 
}

input[type="email"]{
  width: 265px;
  padding: 3px;
  margin: 0 auto;
}

input[type="submit"]{
  background: linear-gradient(firebrick, red);
  color: white;
  border: none;
  appearance: none;
  padding: 5px 7px 5px 7px;
  position: relative;
  margin-top: 1px;  
}

input{
  float: left;
}