Преобразование маркировки на мобильном сафари ⇐ Html

[Anonymous]

form.tsx

Код: Выделить всё

'use client';

import { FC, useEffect, useState } from "react";
import styles from '@/styles/Discuss/Form.module.css';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowDown } from "@fortawesome/free-solid-svg-icons";
import { useTranslations } from "next-intl";
import { useForm, SubmitHandler } from "react-hook-form";
import { Button } from "../utils/Button";

interface Inputs {
name: string,
email: string,
phone: string,
description: string
};

export const Form: FC = () => {
const t = useTranslations('discuss.form');
const { register, handleSubmit, watch, formState: { errors } } = useForm({
defaultValues: {
name: "",
email: "",
phone: "",
description: ""
}
});
const name = watch("name", "");
const email = watch("email", "");
const phone = watch("phone", "");
const description = watch("description", "");

const onSubmit: SubmitHandler = (data) => console.log(data);

return (


{ t('name') }

{ errors.name ? { t('requiredField') } : '' }

Email

{ errors.email ? { t('requiredField') } : '' }

{ t('phone') }

{ errors.phone ? { t('requiredField') }  : '' }

{ t('description') }

{ errors.description ? { t('requiredField') } : '' }



)
}

form.module.css
.form__container {
@apply
flex
flex-col
items-center
w-full
gap-[30px]
;
}

.form__item {
@apply
relative
w-full
;
}

.form__input {
@apply
outline-none
h-[35px]
text-[18px]
font-medium
px-[5px]
py-[10px]
bg-accent
w-full
rounded-none
;
border-bottom: 1px black solid;
}

.form__label {
@apply
absolute
text-black
;
transition: font-size .3s ease-in-out, transform .3s ease-in-out;
}

.form__item:focus-within .form__label,
.form__input:focus + .form__label,
.form__input:not(:placeholder-shown) + .form__label {
@apply
text-[14px]
;
transform: translateY(-20px);
}

.form__required {
@apply
text-[16px]
text-red-600
mt-[5px]
;
}
< /code>
В этой форме, когда пользователь вводит текст в входы - метка поднимается и остается таким, когда не сфокусирован и текст существует внутри ввода.
на ПК работает, но на Мобильный в Safari, когда я что -то набираю на ввод и не сфокусировал этот ввод - метка снижается < /p>
Я хочу, чтобы метка оставалась вверх /> (проблема только в браузере сафари на мобильном телефоне) < /p>

Подробнее здесь: https://stackoverflow.com/questions/794 ... ile-safari