├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 |

Simple Search Bar

2 | 3 |

Oddiy qidiruv paneli

4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Search 9 | 10 | 11 | 12 |
13 |
14 | 15 | 18 |
19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Open+Sans); 2 | 3 | body{ 4 | background: #ffff; 5 | font-family: 'Open Sans', sans-serif; 6 | } 7 | 8 | 9 | .search { 10 | width: 100%; 11 | position: relative; 12 | display: flex; 13 | } 14 | 15 | 16 | .searchTerm { 17 | width: 100%; 18 | border: 3px solid #f4a709; 19 | border-right: none; 20 | padding: 5px; 21 | height: 20px; 22 | border-radius: 5px 0 0 5px; 23 | outline: none; 24 | color: #fff; 25 | } 26 | 27 | 28 | .searchTerm:focus{ 29 | color: #f4a709; 30 | } 31 | 32 | .searchButton { 33 | width: 40px; 34 | height: 36px; 35 | border: 1px solid #f4a709; 36 | background: #f4a709; 37 | text-align: center; 38 | color: #fff; 39 | border-radius: 0 5px 5px 0; 40 | cursor: pointer; 41 | font-size: 20px; 42 | } 43 | 44 | 45 | /*Qidiruv satri o‘zgarishini ko‘rish uchun o‘ram hajmini o‘zgartiring!*/ 46 | .wrap{ 47 | width: 30%; 48 | position: absolute; 49 | top: 50%; 50 | left: 50%; 51 | transform: translate(-50%, -50%); 52 | } 53 | --------------------------------------------------------------------------------