<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form class="livedemo"> <input placeholder="Enter your email" id="two" required type="email" title="Please enter the valid email format (e.g. example@email.com)" x-moz-errormessage="Please enter the valid email format (e.g. example@email.com)" /> <button>submit</button> </form>

.livedemo input { margin: 10px; border: 1px solid #aaa; border-radius: 4px; width: 220px; padding: 3px; } .livedemo button { border: 1px solid #aaa; padding: 3px; border-radius: 5px; cursor: pointer; } :invalid { border: 1px solid red; } :valid { border: 1px solid green; }