#e8e8e8
1.form__group { 2 position: relative; 3} 4 5.form__field { 6 border: 1px solid silver !important; 7 border-radius: 5px; 8 box-sizing: border-box; 9 color: #313a46; 10 height: 40px; 11 padding: 0rem 15px; 12} 13 14.form__field::placeholder { 15 color: transparent; 16} 17 18.form__field:placeholder-shown ~ .form__label { 19 top: 10px; 20 border-right: none; 21 border-left: none; 22} 23 24.form__label { 25 background-color: white; 26 border-left: 1px solid silver; 27 border-right: 1px solid silver; 28 color: #9b9b9b; 29 display: block; 30 font-size: .9em; 31 margin-left: 10px; 32 padding: 0 10px; 33 pointer-events: none; 34 position: absolute; 35 top: -10px; 36 transition: 0.2s; 37} 38 39.form__field:focus { 40 border: 1px solid #B9192C !important; 41 outline: none; 42} 43 44.form__field:focus ~ .form__label { 45 background-color: white; 46 border-right: 1px solid #B9192C; 47 border-left: 1px solid #B9192C; 48 color: #B9192C; 49 font-size: .9em; 50 margin-left: 10px; 51 padding: 0 10px; 52 position: absolute; 53 top: -10px; 54 transition: 0.2s; 55}
2.9K views
2.9K views
Comments
Variations
1 MIT License