6.9K views
CSSAdd prefixes
1/* this is a recreation of twitter search in css */ 2.form { 3 --input-text-color: #fff; 4 --input-bg-color: #283542; 5 --focus-input-bg-color: transparent; 6 --text-color: #949faa; 7 --active-color: #1b9bee; 8 --width-of-input: 200px; 9 --inline-padding-of-input: 1.2em; 10 --gap: 0.9rem; 11} 12/* form style */ 13.form { 14 font-size: 0.9rem; 15 display: flex; 16 gap: 0.5rem; 17 align-items: center; 18 width: var(--width-of-input); 19 position: relative; 20 isolation: isolate; 21} 22/* a fancy bg for showing background and border when focus. */ 23.fancy-bg { 24 position: absolute; 25 width: 100%; 26 inset: 0; 27 background: var(--input-bg-color); 28 border-radius: 30px; 29 height: 100%; 30 z-index: -1; 31 pointer-events: none; 32 box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; 33} 34/* label styling */ 35label { 36 width: 100%; 37 padding: 0.8em; 38 height: 40px; 39 padding-inline: var(--inline-padding-of-input); 40 display: flex; 41 align-items: center; 42} 43 44.search,.close-btn { 45 position: absolute; 46} 47/* styling search-icon */ 48.search { 49 fill: var(--text-color); 50 left: var(--inline-padding-of-input); 51} 52/* svg -- size */ 53svg { 54 width: 17px; 55 display: block; 56} 57/* styling of close button */ 58.close-btn { 59 border: none; 60 right: var(--inline-padding-of-input); 61 box-sizing: border-box; 62 display: flex; 63 align-items: center; 64 justify-content: center; 65 color: #fff; 66 padding: 0.1em; 67 width: 20px; 68 height: 20px; 69 border-radius: 50%; 70 background: var(--active-color); 71 opacity: 0; 72 visibility: hidden; 73} 74/* styling of input */ 75.input { 76 color: var(--input-text-color); 77 width: 100%; 78 margin-inline: min(2em,calc(var(--inline-padding-of-input) + var(--gap))); 79 background: none; 80 border: none; 81} 82 83.input:focus { 84 outline: none; 85} 86 87.input::placeholder { 88 color: var(--text-color) 89} 90/* input background change in focus */ 91.input:focus ~ .fancy-bg { 92 border: 1px solid var(--active-color); 93 background: var(--focus-input-bg-color); 94} 95/* search icon color change in focus */ 96.input:focus ~ .search { 97 fill: var(--active-color); 98} 99/* showing close button when typing */ 100.input:valid ~ .close-btn { 101 opacity: 1; 102 visibility: visible; 103} 104/* this is for the default background in input,when selecting autofill options -- you can remove this code if you do not want to override the browser style. */ 105input:-webkit-autofill, 106input:-webkit-autofill:hover, 107input:-webkit-autofill:focus, 108input:-webkit-autofill:active { 109 -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out"; 110 -webkit-transition-delay: 9999s; 111}
HTML
1<form class="form"> 2 <label for="search"> 3 <input class="input" type="text" required="" placeholder="Search twitter" id="search"> 4 <div class="fancy-bg"></div> 5 <div class="search"> 6 <svg viewBox="0 0 24 24" aria-hidden="true" class="r-14j79pv r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-4wgw6l r-f727ji r-bnwqim r-1plcrui r-lrvibr"> 7 <g> 8 <path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path> 9 </g> 10 </svg> 11 </div> 12 <button class="close-btn" type="reset"> 13 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> 14 <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> 15 </svg> 16 </button> 17 </label> 18</form>