4.1K views
CSSAdd prefixes
1/* From uiverse.io by @satyamchaudharydev */ 2/* this button is inspired by -- whatsapp input */ 3/* == type to see fully interactive and click the close buttom to remove the text == */ 4 5.form { 6 --input-bg: #FFf; 7 /* background of input */ 8 --padding: 1.5em; 9 --rotate: 80deg; 10 /* rotation degree of input*/ 11 --gap: 2em; 12 /* gap of items in input */ 13 --icon-change-color: #15A986; 14 /* when rotating changed icon color */ 15 --height: 40px; 16 /* height */ 17 width: 200px; 18 padding-inline-end: 1em; 19 /* change this for padding in the end of input */ 20 background: var(--input-bg); 21 position: relative; 22 border-radius: 4px; 23} 24 25.form label { 26 display: flex; 27 align-items: center; 28 width: 100%; 29 height: var(--height); 30} 31 32.form input { 33 width: 100%; 34 padding-inline-start: calc(var(--padding) + var(--gap)); 35 outline: none; 36 background: none; 37 border: 0; 38} 39/* style for both icons -- search,close */ 40.form svg { 41 /* display: block; */ 42 color: #111; 43 transition: 0.3s cubic-bezier(.4,0,.2,1); 44 position: absolute; 45 height: 15px; 46} 47/* search icon */ 48.icon { 49 position: absolute; 50 left: var(--padding); 51 transition: 0.3s cubic-bezier(.4,0,.2,1); 52 display: flex; 53 justify-content: center; 54 align-items: center; 55} 56/* arrow-icon*/ 57.swap-off { 58 transform: rotate(-80deg); 59 opacity: 0; 60 visibility: hidden; 61} 62/* close button */ 63.close-btn { 64 /* removing default bg of button */ 65 background: none; 66 border: none; 67 right: calc(var(--padding) - var(--gap)); 68 box-sizing: border-box; 69 display: flex; 70 align-items: center; 71 justify-content: center; 72 color: #111; 73 padding: 0.1em; 74 width: 20px; 75 height: 20px; 76 border-radius: 50%; 77 transition: 0.3s; 78 opacity: 0; 79 transform: scale(0); 80 visibility: hidden; 81} 82 83.form input:focus ~ .icon { 84 transform: rotate(var(--rotate)) scale(1.3); 85} 86 87.form input:focus ~ .icon .swap-off { 88 opacity: 1; 89 transform: rotate(-80deg); 90 visibility: visible; 91 color: var(--icon-change-color); 92} 93 94.form input:focus ~ .icon .swap-on { 95 opacity: 0; 96 visibility: visible; 97} 98 99.form input:valid ~ .icon { 100 transform: scale(1.3) rotate(var(--rotate)) 101} 102 103.form input:valid ~ .icon .swap-off { 104 opacity: 1; 105 visibility: visible; 106 color: var(--icon-change-color); 107} 108 109.form input:valid ~ .icon .swap-on { 110 opacity: 0; 111 visibility: visible; 112} 113 114.form input:valid ~ .close-btn { 115 opacity: 1; 116 visibility: visible; 117 transform: scale(1); 118 transition: 0s; 119} 120
HTML
1<form class="form"> 2 <label for="search"> 3 <input required="" autocomplete="off" placeholder="search your chats" id="search" type="text"> 4 <div class="icon"> 5 <svg stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="swap-on"> 6 <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linejoin="round" stroke-linecap="round"></path> 7 </svg> 8 <svg stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="swap-off"> 9 <path d="M10 19l-7-7m0 0l7-7m-7 7h18" stroke-linejoin="round" stroke-linecap="round"></path> 10 </svg> 11 </div> 12 <button type="reset" class="close-btn"> 13 <svg viewBox="0 0 20 20" class="h-5 w-5" xmlns="http://www.w3.org/2000/svg"> 14 <path clip-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" fill-rule="evenodd"></path> 15 </svg> 16 </button> 17 </label> 18</form>