37 lines
799 B
Svelte
37 lines
799 B
Svelte
<script lang="ts">
|
|
interface Props {
|
|
inputElem?: HTMLInputElement;
|
|
name: string;
|
|
value?: string | null;
|
|
placeholder?: string;
|
|
required?: boolean;
|
|
type?: "text" | "password" | "email" | "number";
|
|
}
|
|
|
|
let { inputElem = $bindable(), value = $bindable(), name, ...rest }: Props = $props();
|
|
</script>
|
|
|
|
<input id={name} {name} bind:value bind:this={inputElem} {...rest} />
|
|
|
|
<style>
|
|
input {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
border: 2px solid #eaffeb;
|
|
background: none;
|
|
color: #eaffeb;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
::placeholder {
|
|
color: #859a90;
|
|
opacity: 1;
|
|
}
|
|
|
|
input:focus {
|
|
border-color: #007bff;
|
|
outline: none;
|
|
}
|
|
</style>
|