Input by fanishah
#212121
1.search-bar { 2 display: flex; 3} 4 5.search-bar input, 6.search-btn, 7.search-btn:before, 8.search-btn:after { 9 transition: all 0.25s ease-out; 10} 11 12.search-bar input, 13.search-btn { 14 width: 3em; 15 height: 3em; 16} 17 18.search-bar input:invalid:not(:focus), 19.search-btn { 20 cursor: pointer; 21} 22 23.search-bar, 24.search-bar input:focus, 25.search-bar input:valid { 26 width: 100%; 27} 28 29.search-bar input:focus, 30.search-bar input:not(:focus) + .search-btn:focus { 31 outline: transparent; 32} 33 34.search-bar { 35 margin: auto; 36 padding: 1.5em; 37 justify-content: center; 38 max-width: 30em; 39} 40 41.search-bar input { 42 background: transparent; 43 border-radius: 1.5em; 44 box-shadow: 0 0 0 0.4em #171717 inset; 45 padding: 0.75em; 46 transform: translate(0.5em,0.5em) scale(0.5); 47 transform-origin: 100% 0; 48 -webkit-appearance: none; 49 -moz-appearance: none; 50 appearance: none; 51} 52 53.search-bar input::-webkit-search-decoration { 54 -webkit-appearance: none; 55} 56 57.search-bar input:focus, 58.search-bar input:valid { 59 background: #fff; 60 border-radius: 0.375em 0 0 0.375em; 61 box-shadow: 0 0 0 0.1em #d9d9d9 inset; 62 transform: scale(1); 63} 64 65.search-btn { 66 background: #171717; 67 border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0; 68 padding: 0.75em; 69 position: relative; 70 transform: translate(0.25em,0.25em) rotate(45deg) scale(0.25,0.125); 71 transform-origin: 0 50%; 72} 73 74.search-btn:before, 75.search-btn:after { 76 content: ""; 77 display: block; 78 opacity: 0; 79 position: absolute; 80} 81 82.search-btn:before { 83 border-radius: 50%; 84 box-shadow: 0 0 0 0.2em #f1f1f1 inset; 85 top: 0.75em; 86 left: 0.75em; 87 width: 1.2em; 88 height: 1.2em; 89} 90 91.search-btn:after { 92 background: #f1f1f1; 93 border-radius: 0 0.25em 0.25em 0; 94 top: 51%; 95 left: 51%; 96 width: 0.75em; 97 height: 0.25em; 98 transform: translate(0.2em,0) rotate(45deg); 99 transform-origin: 0 50%; 100} 101 102.search-btn span { 103 display: inline-block; 104 overflow: hidden; 105 width: 1px; 106 height: 1px; 107} 108 109/* Active state */ 110.search-bar input:focus + .search-btn, 111.search-bar input:valid + .search-btn { 112 background: #2762f3; 113 border-radius: 0 0.375em 0.375em 0; 114 transform: scale(1); 115} 116 117.search-bar input:focus + .search-btn:before, 118.search-bar input:focus + .search-btn:after, 119.search-bar input:valid + .search-btn:before, 120.search-bar input:valid + .search-btn:after { 121 opacity: 1; 122} 123 124.search-bar input:focus + .search-btn:hover, 125.search-bar input:valid + .search-btn:hover, 126.search-bar input:valid:not(:focus) + .search-btn:focus { 127 background: #0c48db; 128} 129 130.search-bar input:focus + .search-btn:active, 131.search-bar input:valid + .search-btn:active { 132 transform: translateY(1px); 133} 134 135@media screen and (prefers-color-scheme: dark) { 136 body, input { 137 color: #f1f1f1; 138 } 139 140 .search-bar input { 141 box-shadow: 0 0 0 0.4em #f1f1f1 inset; 142 } 143 144 .search-bar input:focus, 145 .search-bar input:valid { 146 background: #3d3d3d; 147 box-shadow: 0 0 0 0.1em #3d3d3d inset; 148 } 149 150 .search-btn { 151 background: #f1f1f1; 152 } 153}
1.9K views
1.9K views
MIT License