საიტის ნავიგაცია| ძიების კომპაქტური ფორმა 2025-07-07 |
ავტორი: lazara ძრავა: ყველა აღწერა: ეს არის ლამაზი ძიების ფორმა Code <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link rel="shortcut icon" href="/favicon.ico" /> <title>ძიების კომპაქტური ფორმა | gelesson.net</title> <style> body {background:#f2f2f2;} .content {width:300px;margin:10% auto;} /* reset webkit search input browser style */ input { outline: none; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; /* remove the search and cancel icon */ } /* search input field */ input[type=search] { background: #ededed url(http://www.picz.ge/img/s2/1306/6/c/c4113391d9bc.png) no-repeat 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; -webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } input[type=search]:focus { width: 130px; background-color: #fff; border-color: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); } /* placeholder */ input:-moz-placeholder { color: #999; } input::-webkit-input-placeholder { color: #999; } /* დემო 2 */ #demo-b input[type=search] { width: 18px; padding-left: 10px; color: transparent; cursor: pointer; } #demo-b input[type=search]:hover { background-color: #fff; } #demo-b input[type=search]:focus { width: 130px; padding-left: 32px; color: #000; background-color: #fff; cursor: auto; } #demo-b input:-moz-placeholder { color: transparent; } #demo-b input::-webkit-input-placeholder { color: transparent; } </style> </head> <body> <div class="content"> <h3>დემო 1</h3> <form> <input placeholder="ძიება" type="search"> </form> <h3>დემო 2</h3> <form id="demo-b"> <input placeholder="ძიება" type="search"> </form> </div> </body> </html> |
| სულ კომენტარები: 0 | |
