#212121
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}
16K views
16K views
Comments
MIT License