6.5K views
CSSAdd prefixes
1/* From uiverse.io by @satyamchaudharydev */ 2/* removing default style of button */ 3 4.form button { 5 border: none; 6 background: none; 7 color: #8b8ba7; 8} 9/* styling of whole input container */ 10.form { 11 --timing: 0.3s; 12 --width-of-input: 200px; 13 --height-of-input: 40px; 14 --border-height: 2px; 15 --input-bg: #fff; 16 --border-color: #2f2ee9; 17 --border-radius: 30px; 18 --after-border-radius: 1px; 19 position: relative; 20 width: var(--width-of-input); 21 height: var(--height-of-input); 22 display: flex; 23 align-items: center; 24 padding-inline: 0.8em; 25 border-radius: var(--border-radius); 26 transition: border-radius 0.5s ease; 27 background: var(--input-bg,#fff); 28} 29/* styling of Input */ 30.input { 31 font-size: 0.9rem; 32 background-color: transparent; 33 width: 100%; 34 height: 100%; 35 padding-inline: 0.5em; 36 padding-block: 0.7em; 37 border: none; 38} 39/* styling of animated border */ 40.form:before { 41 content: ""; 42 position: absolute; 43 background: var(--border-color); 44 transform: scaleX(0); 45 transform-origin: center; 46 width: 100%; 47 height: var(--border-height); 48 left: 0; 49 bottom: 0; 50 border-radius: 1px; 51 transition: transform var(--timing) ease; 52} 53/* Hover on Input */ 54.form:focus-within { 55 border-radius: var(--after-border-radius); 56} 57 58input:focus { 59 outline: none; 60} 61/* here is code of animated border */ 62.form:focus-within:before { 63 transform: scale(1); 64} 65/* styling of close button */ 66/* == you can click the close button to remove text == */ 67.reset { 68 border: none; 69 background: none; 70 opacity: 0; 71 visibility: hidden; 72} 73/* close button shown when typing */ 74input:not(:placeholder-shown) ~ .reset { 75 opacity: 1; 76 visibility: visible; 77} 78/* sizing svg icons */ 79.form svg { 80 width: 17px; 81 margin-top: 3px; 82}
HTML
1 <form class="form"> 2 <button> 3 <svg width="17" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="search"> 4 <path d="M7.667 12.667A5.333 5.333 0 107.667 2a5.333 5.333 0 000 10.667zM14.334 14l-2.9-2.9" stroke="currentColor" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"></path> 5 </svg> 6 </button> 7 <input class="input" placeholder="Type your text" required="" type="text"> 8 <button class="reset" type="reset"> 9 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 10 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> 11 </svg> 12 </button> 13 </form>