【发布时间】：2021-10-31 12:34:11
【问题描述】：
我在滑动模式上有一个简单的登录表单。在桌面和使用开发工具的响应模式下，它看起来应该如此。然而，在移动版 Chrome 和 Safari 上——在 iPhone 上，有一个奇怪的灰色圆形框或阴影。
我正在使用 tialwind css。并且该组件是用无头 ui 构建的。
我已尝试将-webkit-appearance: none; 添加到表单中，但该框仍然存在。
它在桌面上的外观如下： desktop view
这是它在我的 iphone 上的外观： mobile view
这是组件代码：
return (
<Transition.Root show={showModal.open} as={Fragment}>
<Dialog
as="div"
className="fixed inset-0 overflow-hidden"
onClose={() => setShowModal({ open: false })}
>
<div className="absolute inset-0 overflow-hidden">
<Transition.Child
as={Fragment}
enter="ease-in-out duration-500"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-500"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="absolute inset-0 bg-black bg-opacity-80 transition-opacity" />
</Transition.Child>
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex">
<Transition.Child
as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transform transition ease-in-out duration-500 sm:duration-700"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div className="w-screen max-w-md">
<div className="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
<div className="px-4 sm:px-6">
<div className="flex items-start justify-between">
<Dialog.Title className="text-2xl font-light text-vhGreen">
Welcome!
</Dialog.Title>
<div className="ml-3 h-7 flex items-center">
<button
type="button"
className="bg-white rounded-md text-vhGreen hover:text-gray-500 focus:outline-none"
onClick={() => setShowModal({ open: false })}
>
<span className="sr-only">Close panel</span>
<XCircleIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
</div>
</div>
<div className="mt-6 relative flex-1 px-4 sm:px-6">
{/* Replace with your content */}
<div className="absolute inset-0 px-4 sm:px-6">
<div className="relative p-6 flex-auto bg-white">
<h4 className="text-vhGreen font-light">
Login or sign up to gain access to the gallery and to
receive periodic updates from Thea
</h4>
<form
type="submit"
onSubmit={(e) => handleSubmit(e)}
className="bg-white"
>
{isNewUser && (
<>
<div className="my-4 text-sm">
<label className="block text-vhGreen">
First Name
</label>
<input
value={authForm.firstName || ""}
onChange={(e) => handleChange(e)}
type="text"
name="firstName"
placeholder="First Name"
className="w-full px-4 py-3 rounded-md text-vhGreen font-light"
/>
</div>
<div className="my-4 text-sm">
<label className="block text-vhGreen">
Last Name
</label>
<input
value={authForm.lastName || ""}
onChange={(e) => handleChange(e)}
type="text"
name="lastName"
placeholder="Last Name"
className="w-full px-4 py-3 rounded-md"
/>
</div>
</>
)}
<div className="my-4 text-sm">
<label className="block text-vhGreen">Email</label>
<input
value={authForm.email || ""}
onChange={(e) => handleChange(e)}
type="text"
name="email"
placeholder="Email"
className="w-full px-4 py-3 rounded-md"
/>
</div>
<div className="my-4 text-sm">
<label className="block text-vhGreen">
Password
</label>
<input
value={authForm.password || ""}
onChange={(e) => handleChange(e)}
type="password"
name="password"
placeholder="Password"
className="w-full px-4 py-3 rounded-md"
onKeyDown={(e) => onKeyDown(e)}
/>
<div className="flex justify-end text-vhGreen text-sm font-light">
<button
type="button"
onClick={() => handleNewSwitch()}
>
{!isNewUser
? "Need an account? Sign Up!"
: "Already have an account? Login!"}
</button>
</div>
</div>
</form>
</div>
{/*footer*/}
<div className="flex items-center justify-center p-6 border-t border-solid border-blueGray-200 rounded-b">
<button
className="text-vhGreen background-transparent font-light uppercase px-6 py-2 text-xl outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={(e) => handleSubmit(e)}
>
{isNewUser ? "Sign Up" : "Login"}
</button>
</div>
</div>
{/* /End replace */}
</div>
</div>
</div>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);【问题讨论】：
-
对我来说同样的问题。你找到答案了吗？
标签： css reactjs tailwind-css