1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
| * { margin: 0; padding: 0; box-sizing: border-box; outline: none;
} body{ background-color: #f1f1f1; } .bbs { display: flex; align-items: center; flex-direction: column; margin: 40px auto; max-width: 560px; min-height: 50vh; background-color: #1d2b3a; border-radius: 8px; box-shadow: rgba(116, 114, 114, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset; padding: 30px; gap: 30px; }
.inputBox{ position: relative; width: 400px; } .inputBox input , textarea{ width: 100%; border: 1px solid rgba(255,255,255,0.25); background: #1d2b3a; border-radius: 5px; outline: none; padding: 10px; color: #bdbabac9; font-size: 1.5em; transition: 0.5s; }
.inputBox textarea{ resize: none; }
.inputBox span{ position: absolute; left: 0; padding: 10px; pointer-events: none; font-size: 1em; color: rgba(255,255,255,0.25); transition: 0.5s; } .inputBox input:focus ~ span , .inputBox input:valid ~ span , .inputBox textarea:focus ~ span, .inputBox textarea:valid ~ span { color: #00dfc4; transform: translateX(10px) translateY(-9px); font-size: 0.9em; padding: 0 10px ; background: #1d2b3a;
}
.inputBox input:focus , .inputBox input:valid , .inputBox textarea:focus, .inputBox textarea:valid { border: 1px solid #00dfc4 ; }
.btn { text-decoration: none; display: inline-block; padding: 10px 20px; background-color: #000; color: #fff; border-radius: 5px; width: auto; } .btn:hover{ background-color: #00dfc5a5; }
|