I have implemented custom styling for form inputs in my Next.js project using Tailwind CSS classes.
Below is the code snippet that showcases how I have styled the form inputs:
import * as React from "react";
import { cn } from "@/lib/util";
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ type, className, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"h-10 w-full rounded-md border-0 px-3 py-2 shadow bg-transparent ring-1 ring-inset ring-neutral-200 transition ease-out placeholder:text-neutral-400 focus:ring-2 focus:ring-inset focus:outline-none focus:ring-neutral-400 sm:text-sm",
className,
)}
ref={ref}
{...props}
/>
);
},
);
Input.displayName = "Input";
export { Input };
In this implementation, I have used a ring instead of a border around the input field. The relevant CSS classes for this are:
border-0 ring-1 ring-inset ring-neutral-200Upon inspecting the login form using Chrome Dev Tools in responsive mode, I can see the ring and shadow effect around the input, as shown below:
https://i.sstatic.net/WfVn1.png
But strangely, when accessing the website on my iPhone, the ring effect is not visible around the input fields:
https://i.sstatic.net/SrVv0.jpg
I would greatly appreciate assistance in understanding why this inconsistency is occurring between different devices.
If you would like to view the login form directly, please visit the following link: