HTML CSS examples for CSS Widget:Hover Animation
Nested input and select box with hover transition
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html {<!--from ww w. ja va 2 s .c o m--> background-color:Chartreuse; } .quick-search-container { position:relative; width:251px; display:flex; justify-content:flex-end; align-items:center; border:2px solid; } .input-select { width:0; overflow:hidden; transition:width 2s; display:flex; } .quick-search-selector { width:31%; height:31px; } .quick-search-input { width:71%; -webkit-appearance:none; outline:0; height:31px; } .quick-search-container:hover .input-select { width:100%; } .quick-search-button { position:absolute; right:0; top:0; bottom:0; font-size:17px; background:none; border:0; outline:0; } </style> </head> <body> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <a class="quick-search-container"> <span class="input-select"> <select class="quick-search-selector" id="selector"> <option>Lor</option> <option>Lore</option> <option>Lorem</option> <option>Lor</option> </select> <input type="search" class="quick-search-input" placeholder="Search..." id="search"> </span> <button class="quick-search-button"> <i class="fa fa-search"></i> </button> </a> </body> </html>