<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <form role="form" style="width:400px; margin: 0 auto;"> <h1>Contact us</h1> <div class="required-field-block"> <input type="text" placeholder="Name" class="form-control" id="name" onchange="changeIcon('name', 'iconName')"> <div class="required-icon"> <div class="text" id="iconName">*</div> </div> </div> <div class="required-field-block"> <input type="text" placeholder="Email" class="form-control"> <div class="required-icon"> <div class="text" id="iconMail">*</div> </div> </div> <input type="text" placeholder="Phone" class="form-control"> <div class="required-field-block"> <textarea rows="3" class="form-control" placeholder="Message"></textarea> <div class="required-icon"> <div class="text">*</div> </div> </div> <button class="btn btn-primary">Send</button> </form> </div>

input, textarea, button { margin-top:10px } /* Required field START */ .required-field-block { position: relative; } .required-field-block .required-icon { display: inline-block; vertical-align: middle; margin: -0.25em 0.25em 0em; background-color: #E8E8E8; border-color: #E8E8E8; padding: 0.5em 0.8em; color: rgba(0, 0, 0, 0.65); text-transform: uppercase; font-weight: normal; border-radius: 0.325em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background 0.1s linear; -moz-transition: background 0.1s linear; transition: background 0.1s linear; font-size: 75%; } .required-field-block .required-icon { background-color: transparent; position: absolute; top: 0em; right: 0em; z-index: 10; margin: 0em; width: 3em; height: 3em; padding: 0em; text-align: center; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; transition: color 0.2s ease; } .required-field-block .required-icon:after { position: absolute; content: ""; right: 1px; top: 1px; z-index: -1; width: 0em; height: 0em; border-top: 0em solid transparent; border-right: 3em solid transparent; border-bottom: 3em solid transparent; border-left: 0em solid transparent; border-right-color: inherit; -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } .required-field-block .required-icon .text { color: #B80000; font-size: 26px; margin: -3px 0 0 13px; } /* Required field END */

$(function() { $('.required-icon').tooltip({ placement: 'left', title: 'Required field' }).tooltip(); }); function changeIcon (id, id_icon) { var input = document.getElementById(id); var icon = document.getElementById(id_icon); if(input.value == "") { icon.style.color = rgba(0, 0, 0, 0.65); } else { icon.style.color = "green"; } }