├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # CSS-Simple-Search-Bar 2 | 3 | 4 | 5 | 6 | https://user-images.githubusercontent.com/42389395/175832420-2c64930c-a650-463d-9e63-b2639623a14d.mov 7 | 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Test 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

Click on search icon

16 |
17 | 18 |
19 |
20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700"); 2 | 3 | * { 4 | font-family: Roboto, sans-serif; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | html, body { 10 | width: 100%; 11 | height: 100%; 12 | } 13 | 14 | .flexbox { 15 | background: #f2eee3; 16 | width: 100%; 17 | height: 100%; 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | } 22 | 23 | .search { 24 | margin: 20px; 25 | } 26 | 27 | 28 | .search > h1 { 29 | color: red; 30 | margin-bottom: 15px; 31 | 32 | } 33 | 34 | .search > div { 35 | display: inline-block; 36 | position: relative; 37 | 38 | } 39 | 40 | .search > div:after { 41 | content: ""; 42 | background: black; 43 | width: 4px; 44 | height: 20px; 45 | position: absolute; 46 | top: 40px; 47 | right: 2px; 48 | transform: rotate(135deg); 49 | } 50 | 51 | .search > div > input { 52 | color: black; 53 | font-size: 16px; 54 | background: transparent; 55 | width: 25px; 56 | height: 25px; 57 | padding: 10px; 58 | border: solid 3px black; 59 | outline: none; 60 | border-radius: 35px; 61 | transition: width 0.5s; 62 | } 63 | 64 | .search > div > input::placeholder { 65 | color: black; 66 | opacity: 0; 67 | transition: opacity 150ms ease-out; 68 | } 69 | 70 | .search > div > input:focus::placeholder { 71 | opacity: 1; 72 | } 73 | 74 | .search > div > input:focus, 75 | .search > div > input:not(:placeholder-shown) { 76 | width: 250px; 77 | } 78 | --------------------------------------------------------------------------------