Untitled
unknown
javascript
a month ago
1.1 kB
1
Indexable
Never
<script setup> import { ref } from 'vue' const props = defineProps(['label', 'err']) var data = ref('') </script> <template> <div :class="{ 'c--field': true, 'err': props.err } "> <label>{{ props.label }}</label> <input type="text" /> <span v-if="props.err">{{ props.err }}</span> </div> </template> <style> .c--field { position: relative; } .c--field.err > input { border-color: #ff4040; outline: none; } .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:has(input:focus) > label { color: #240488; } .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):not(.err) > input { border-color: #240488; } .c--field > span { color: #ff4040; font-size: 14px; padding: 0 10px; } </style>