In Persian language, the text direction is set to rtl.
I am looking for a way to adjust this input field to suit my language for the project.
Please refer to the following image:
I want to achieve something similar, but I am unsure how to change the border on hover. While I can modify the label text using CSS properties like position: relative or absolute to move it, handling the border line when the input is clicked perplexes me.
Any insights on how to achieve this? Any help will be greatly appreciated.
The provided material UI code snippet:
import * as React from "react";
import TextField from "@mui/material/TextField";
<div style={{ margin: "10rem 5rem" }}>
<TextField
id="outlined-basic"
label="متن"
variant="outlined"
/>
</div>