Untitled
unknown
javascript
2 months ago
894 B
1
Indexable
Never
<script setup> import { ref } from 'vue' const props = defineProps(['label', 'placeholder', 'hint']) var data = ref('') </script> <template> <div class="c--field"> <label>{{ props.label }}</label> <input type="text" /> <!-- <span>error message</span> --> </div> </template> <style> .c--field { position: relative; padding: 0; } .c--field > label { position: absolute; width: fit-content; top: -6px; background-color: #fff; margin: 0 0 0 13px; padding: 0 7px; font-size: 14px; line-height: 14px; font-weight: 700; color: #555; } .c--field > input { color: #555; width: calc(100% - 24px); height: 32px; border: solid 3px #555; border-radius: 5px; padding: 0 10px; } .c--field:has(input:focus) > label { color: #240488; } .c--field:has(input:focus) > input { outline: none; border-color: #240488; } </style>