Menciptakan elemen kotak penelusuran tersembunyi dengan jQuery. Saat keadaan normal, kotak penelusuran akan tampak sebagai ikon beling pembesar, dan ketika ikon tersebut diklik, itu akan memicu kotak penelusuran di dalamnya untuk tampil:
HTML
<form class="search-form" action="/search" method="get"> <div class="input-wrapper"> <input type="text" name="q" placeholder="Search..."> <a title="Kotak Penelusuran dalam Simbol" class="sc" href="/"></a> </div> </form>CSS
.input-wrapper { border:1px solid #B9E8FB; width:26px; height:26px; background-color:white; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2); -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.2); box-shadow:inset 0 1px 1px rgba(0,0,0,.2); -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; overflow:hidden; position:relative; } .input-wrapper input, .input-wrapper input:focus { border:none; background:none; margin:0 0; padding:0 16px; display:block; width:200px; height:26px; font:italic bold 12px/26px Arial,Sans-Serif; color:#1C86AF; outline:none; } .input-wrapper.focus { background-color:#EAF7FC; border-color:#3EBFF0; } .input-wrapper .sc { display:block; position:absolute; top:0; right:0; bottom:0; left:0; background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGOSURBVDhPrZJPSwJRFMXPokD6BkFQyzaRQUGrKII21a5Vu9oHLVq07hNUSFSYWqOmwjSGY0aRQqsCXUQJlaXSaEZamI2mTnV7WguNMUR6cHiX98793fv+AP8+9gvd2P9cYuKZdPDQYH01/NSMPcWCYyIcVMjL4r13AT7S/A1yFZzM+J3sUZYZbByisojDEuCD4C4GGKRJHbIjj+DoxyjI2iqTmGuHq/AIt0JwFgdqAF4dcOUJvDynanDK8xCLBCHjrQF48WE3S9h+61A18C/97DiEnXRaHWBPiuDTBHtqQtXgSE1BkAm2pF8dYHuYheOJYE3kVQ3WRACOVGl/uvZLmOMxWO4JW9IFzLExcNFWcNIouNgJrGzdHCup+oKraJzUBlM4DovE7iJB5YqlmbsjbEYfsBXJwp5k8U1v7S6MEQ2MoRnob5/L3RhvMzCEFrDmb4H+ugebkSI2Qp8w3HTV9zt/u0yhIQbMwRjOw3De1xhkNTiM9eAHTFHC2mVnYxDdqRb6KwUrZ5ONASqyvgCU5N7E8iBBBAAAAABJRU5ErkJggg==') no-repeat 50% 50%; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; }jQuery
$(function() { $('.search-form .sc').on("click", function() { $(this).hide() .parent().addClass('focus') .stop().animate({width:200}, 120, "swing") .find('input').trigger("focus") .on("focusout", function() { $(this).next().show() .parent().removeClass('focus') .stop().animate({width:26}, 120, "swing"); }); return false; }); });