<link href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="control is-awesome "> <input class="input is-rounded is-primary" type="text" placeholder="Normal input"> <span class="icon is-small is-left"> <i class="fas fa-search"></i> </span> </input> </div> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

.is-awesome .input { width: 20px; margin: 10px; transition: width 0.4s linear; } .is-awesome .input:active, .is-awesome .input:focus { width: 400px; transition: width 0.4s linear; } .search_icon { height: 35px; width: 35px; float: right; display: flex; justify-content: center; align-items: center; border-radius: 50%; color:white; text-decoration:none; } .is-awesome .icon { color: #dbdbdb; height: 2.25em; pointer-events: none; position: absolute; top: 10px; width: 2.0em; z-index: 4; left:11px; } .is-awesome input:focus .icon { display:none; }

$(document).ready(function(){ $('.input').on('focus', function(e) { $('.icon').hide() }) $('.input').on('blur', function(e) { // should delay until transition finished $('.icon').show() }) });