1.1K views
1.input { 2 color: #fff; 3 font-size: 0.9rem; 4 background-color: transparent; 5 width: 100%; 6 box-sizing: border-box; 7 padding-inline: 0.5em; 8 padding-block: 0.7em; 9 border: none; 10 border-bottom: var(--border-height) solid var(--border-before-color); 11 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 12} 13 14.input-border { 15 position: absolute; 16 background: var(--border-after-color); 17 width: 0%; 18 height: 2px; 19 bottom: 0; 20 left: 0; 21 transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045); 22} 23 24.input:focus { 25 outline: none; 26} 27 28.input:focus + .input-border { 29 width: 100%; 30} 31 32.form-control { 33 position: relative; 34 --width-of-input: 300px; 35} 36 37.input-alt { 38 font-size: 1.2rem; 39 padding-inline: 1em; 40 padding-block: 0.8em; 41 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 42} 43 44.input-border-alt { 45 height: 3px; 46 background: linear-gradient(90deg, #FF6464 0%, #FFBF59 50%, #47C9FF 100%); 47 transition: width 0.4s cubic-bezier(0.42, 0, 0.58, 1.00); 48} 49 50.input-alt:focus + .input-border-alt { 51 width: 100%; 52}
MIT License