Floating Minimal Accent Input Field

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="floataccent-box"><input type="text" class="floataccent-field" placeholder=" " required><label class="floataccent-label">EMAIL ADDRESS</label></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.floataccent-box { position: relative; width: 170px; margin: auto; font-family: system-ui, sans-serif; }
.floataccent-field { width: 100%; background: #18181b; border: 1px solid #27272a; border-radius: 8px; padding: 10px 10px 4px; font-size: 10px; font-weight: 700; color: #fff; outline: none; box-sizing: border-box; transition: border-color 0.2s; }
.floataccent-label { position: absolute; left: 10px; top: 8px; font-size: 8px; font-weight: 800; color: #71717a; pointer-events: none; transition: all 0.2s; }
.floataccent-field:focus, .floataccent-field:not(:placeholder-shown) { border-color: #a855f7; }
.floataccent-field:focus ~ .floataccent-label, .floataccent-field:not(:placeholder-shown) ~ .floataccent-label { top: 2px; font-size: 6px; color: #c084fc; }