Input by ElsayedShamsEldeen
#212121
1.container { 2 display: flex; 3 flex-direction: column; 4 gap: 7px; 5 position: relative; 6 color: white; 7} 8 9.container .label { 10 font-size: 15px; 11 padding-left: 10px; 12 position: absolute; 13 top: 13px; 14 transition: 0.3s; 15 pointer-events: none; 16} 17 18.input { 19 width: 200px; 20 height: 45px; 21 border: none; 22 outline: none; 23 padding: 0px 7px; 24 border-radius: 6px; 25 color: #fff; 26 font-size: 15px; 27 background-color: transparent; 28 box-shadow: 3px 3px 10px rgba(0, 0, 0, 1), 29 -1px -1px 6px rgba(255, 255, 255, 0.4); 30} 31 32.input:focus { 33 border: 2px solid transparent; 34 color: #fff; 35 box-shadow: 3px 3px 10px rgba(0, 0, 0, 1), 36 -1px -1px 6px rgba(255, 255, 255, 0.4), inset 3px 3px 10px rgba(0, 0, 0, 1), 37 inset -1px -1px 6px rgba(255, 255, 255, 0.4); 38} 39 40.container .input:valid ~ .label, 41.container .input:focus ~ .label { 42 transition: 0.3s; 43 padding-left: 2px; 44 transform: translate(15px, -27px); 45 letter-spacing: 5px; 46 font-weight: bold; 47} 48 49.container .input:valid, 50.container .input:focus { 51 box-shadow: 3px 3px 10px rgba(0, 0, 0, 1), 52 -1px -1px 6px rgba(255, 255, 255, 0.4), inset 3px 3px 10px rgba(0, 0, 0, 1), 53 inset -1px -1px 6px rgba(255, 255, 255, 0.4); 54} 55
570 views
Variation of ainput
MIT License