html - Resizeable text input -
i use bootstrap in site, wan't create this.
my html code:
<form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control search-input" placeholder="search"> </div> <button type="submit" class="btn btn-default"> 'find'</button> </form>
how can resize input?
in tutorial specified , css code there : add part html page : demo here
<style stype='text/css'> input[type=text].search_form { border: 1px solid #ccc; border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); width:200px; min-height: 28px; padding: 4px 20px 4px 8px; font-size: 12px; -moz-transition: .2s linear; -webkit-transition: .2s linear; transition: .2s linear; } input[type=text]:focus.search_form { width: 400px; border-color: #51a7e8; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5); outline: none; } </style> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control search-input" placeholder="search"> </div> <button type="submit" class="btn btn-default"> 'find'</button> </form>
Comments
Post a Comment