Расширяемая форма поиска для мобильных устройств
Простая и в тоже время удобная расширяемая форма поиска для мобильных устройств реализованная на CSS
Как реализовать:
1. Разметка html
|
1 2 3 |
<form> <input type="search" placeholder="Search"> </form> |
2. Оформление CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
/* 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(images/search-icon.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; } |
3. Второй вариант на скриншоте (html)
|
1 2 3 |
<form id="demo-b"> <input type="search" placeholder="Search"> </form> |
4. Второй вариант на скриншоте (css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* demo B */ #demo-b input[type=search] { width: 15px; 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; } |
