function get_results(event){ event.preventDefault(); document.getElementById('s-input').classList.add("activo"); }
<div id="search_widget" class="search-widget" data-search-controller-url="//localhost/busqueda"> <form method="get" action="#" onsubmit="get_results(event)"> <input name="controller" value="search" type="hidden"> <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input name="s" value="" placeholder="Búsqueda en catálogo" aria-label="Buscar" class="ui-autocomplete-input" autocomplete="off" type="text" id="s-input"> <button type="submit"> <i class="material-icons search"></i> <span class="hidden-xl-down">Buscar</span> </button> </form> </div>
#header .header-top .search-widget { position: relative; width: 56%; left: 12%; float: left; z-index: 999; min-width: inherit; } .search-widget form input[type="text"] { font: 15px 'Comfortaa',cursive; letter-spacing: .5px; border: none; border: 2px solid #e5e5e5; padding: .7rem 3rem .7rem 1.2rem; box-shadow: 0 3px 8px #E7E7E7 inset; -webkit-box-shadow: 0 3px 8px #E7E7E7 inset; -moz-box-shadow: 0 3px 8px #E7E7E7 inset; -ms-box-shadow: 0 3px 8px #E7E7E7 inset; -o-box-shadow: 0 3px 8px #E7E7E7 inset; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; } .search-widget form input[type="text"].activo { border: 2px solid #ddd; border-radius: 25px 25px 0 0; -webkit-border-radius: 25px 25px 0 0; -moz-border-radius: 25px 25px 0 0; -ms-border-radius: 25px 25px 0 0; -o-border-radius: 25px 25px 0 0; outline:none; } .ui-corner-all{ border-radius: 0 0 1rem 1rem; } .ui-widget-content{ z-index: 999; border-top: 0 !important; border: 2px solid #ddd; padding: 1rem 0; width: 431px !important; top: 87px !important; box-shadow: 2px -6px 6px 0 #E7E7E7 inset, -2px -6px 6px 0 #E7E7E7 inset; -webkit-box-shadow: 2px -6px 6px 0 #E7E7E7 inset, -2px -6px 6px 0 #E7E7E7 inset; -moz-box-shadow: 2px -6px 6px 0 #E7E7E7 inset, -2px -6px 6px 0 #E7E7E7 inset; -ms-box-shadow: 2px -6px 6px 0 #E7E7E7 inset, -2px -6px 6px 0 #E7E7E7 inset; -o-box-shadow: 2px -6px 6px 0 #E7E7E7 inset, -2px -6px 6px 0 #E7E7E7 inset; } .ui-menu .ui-menu-item a { border-radius: 0 !important; } .ui-menu .ui-menu-item a:hover { border: 1px dotted #999; } .search-widget form button[type="submit"] { cursor: pointer; bottom: .6rem; right: .8rem; } .searchDescription { float:right; width: 75%; margin-top: .5rem; } .searchProductname { font: 16px/11px 'Comfortaa',cursive; color: #111; } .searchPrice { font: 16px/0 'Comfortaa',cursive; color: red; }