Input by roroland
#e8e8e8
1.label { 2 --border: rgba(66, 66, 66, 0.733); 3 --bgLabel: rgba(120,120,120,1); 4 --bgInput: rgba(255,255,255,1); 5 --color-light: rgb(98, 0, 255); 6 --color-light-a: rgb(133, 123, 150); 7 display: grid; 8 grid-template-columns: 1fr 1fr; 9 grid-template-rows: min-content min-content; 10 background: var(--bgLabel); 11 position: relative; 12 font-size: .65rem; 13 transition: all .3s ease-out; 14} 15 16.label > .label-title { 17 border: 1px solid var(--color-light); 18 color: var(--color-light); 19 box-shadow: 0 2px 2px rgba(120,120,120,.25); 20 padding: .25em .5em; 21 background-color: var(--bgInput); 22 grid-column: 1/span 1; 23 grid-row: 1/span 1; 24 position: relative; 25 border-radius: 4px; 26 translate: 10px -10px; 27 transition: all .5s ease-out .5s; 28 z-index: 10; 29} 30 31.label:focus .input, 32.label:focus-within .input { 33 background-color: var(--bgInput); 34 padding: 1em; 35 color: var(--color-light); 36 border: 2px solid var(--color-light); 37 outline: 2px solid var(--color-light); 38 outline-offset: -2px; 39 border-radius: 12px; 40 box-shadow: 0 5px 10px rgba(98, 0, 255, .25), 0 -5px 20px rgba(98, 0, 255,.1); 41 scale: 1.15; 42 transition: all .5s cubic-bezier(0,1.46,1,1.62) .3s; 43} 44 45.label:focus, 46.label:focus-within .label-title { 47 translate: 10px -20px; 48 border-radius: 4px 4px 0 0; 49 z-index: 0; 50 transition: all .3s cubic-bezier(0,1.46,1,1.62); 51} 52 53.input { 54 appearance: none; 55 border-top: 2px solid transparent; 56 border-right: 2px solid transparent; 57 border-bottom: 2px solid var(--color-light); 58 border-left: 2px solid transparent; 59 background-color: var(--bgInput); 60 caret-color: var(--color-light); 61 min-width: 200px; 62 padding: 1.25em 1em .25em; 63 outline: 0px solid var(--color-light); 64 grid-column: 1/-1; 65 grid-row: 1 / -1; 66 position: relative; 67 transition: all .3s cubic-bezier(.5,.6,.5,.62); 68 z-index: 0; 69} 70 71.input, 72.input::placeholder { 73 color: var(--color-light-a); 74}
2.1K views
2.1K views
MIT License