Input by jamaldine-hub
#212121
1.container { 2 position: relative; 3 width: 250px; 4} 5.container .inp { 6 width: 100%; 7 padding: 10px; 8 border: 1.5px solid rgba(0, 167, 161, 0.272); 9 outline: none; 10 margin-top: 20px; 11 border-radius: 5px; 12 color: rgba(0, 167, 181, 0.62); 13 background: rgba(41, 41, 41); 14 font-size: 1em; 15} 16.container .content { 17 position: absolute; 18 left: 0; 19 margin-top: 20px; 20 padding: 10px; 21 text-transform: uppercase; 22 font-size: 1em; 23 pointer-events: none; 24 color: rgba(0, 167, 161, 0.272); 25 transition: 0.5s; 26} 27.container input:valid ~ span, 28.container input:focus ~ span { 29 color: rgb(10, 164, 159); 30 transform: translateX(10px) translateY(-7px); 31 font-size: 0.9em; 32 padding: 0 10px; 33 background: rgb(41, 41, 41); 34 border-left: 2px solid rgba(0, 167, 161, 0.272); 35 border-right: 2px solid rgba(0, 167, 161, 0.272); 36} 37
336 views
336 views
MIT License