Animated Label Input

1<script>
2  let val = '';
3</script>
4
5<div class="wrap" class:filled={val.length > 0}>
6  <input bind:value={val} type="text" placeholder=" " />
7  <label>Firmenname</label>
8</div>
9
10<style>
11  .wrap{position:relative;width:280px;font-family:system-ui}
12  input{width:100%;padding:16px 14px 8px;border:1px solid rgba(255,255,255,.14);border-radius:12px;
13    background:rgba(255,255,255,.04);color:#fff;font-size:15px;outline:none;box-sizing:border-box;transition:border-color .2s}
14  input:focus{border-color:#06b6d4}
15  label{position:absolute;left:14px;top:14px;color:rgba(255,255,255,.45);font-size:15px;pointer-events:none;transition:.2s}
16  input:focus + label, .filled label{top:6px;font-size:11px;color:#67e8f9}
17</style>