placeholder values on input not showing on a React Project deployed to Vercel including netlify

Question

Am using the React hook-forms library for my forms values and validations of input datas. The Placeholder is showing on development server, which is the localhost but on deploying, the placholder wont show, making it seems like there is no how to understand what should be typed into the fields.

import { useForm } from "react-hook-form";


function Contact(){
   const {
    register,
    handleSubmit,
    formState: { errors },
    trigger,
    reset,
    setFocus,
  } = useForm();

  useEffect(() => {
    setFocus("name");
  }, []);

return (
       <form className="forminformation" onSubmit={handleSubmit(onSubmit)}>
              <aside
                data-aos="fade-left"
                data-aos-delay="500"
                className="form-inputs"
              >
                <input
                  placeholder="Full Name"
                  type="text"
                  autoComplete="new-name"
                  {...register("name", { required: "can't be empty" })}
                  onKeyUp={() => trigger("name")}
                />
                {errors.name && (
                  <p className="error-Info ">
                    <em>{errors.name.message}</em>
                    <img src={ErrorIcon} alt="ErrorIcon" />
                  </p>
                )}
              </aside
</form>
)
}

The Placeholder is working on localhost but neither vercel or.netify is showing it

localhost image below enter image description here

vercel enter image description here

Answer 1

I Later got what was wrong with the code and while placeholder value is not showing on production. I was following a figma file to design the website. so i had this in my code which is what figma usually use for their file and what has been causing issues

opacity:50%;

so instead of using the above, i changed my css file into

opacity:.5;

and this works for me.