<div>
<body class="m-0 p-0 h-fit justify-center items-center min-h-screen font-['Jost',sans-serif] bg-gradient-to-b from-[#0F0C29] via-[#302B63] to-[#24243E] overflow-hidden flex">
<div class="main w-[350px] h-[580px] bg-red-600 overflow-hidden rounded-[10px] shadow-[5px_20px_50px_rgb(0,0,0)] bg-[url('C:\Users\Althaf\Desktop\Worxa\frontend\src\components\icon\FormBackground.jpg')]">
<input class="hidden" type="checkbox" id="chk" aria-hidden="true"></input>
<div class="signup relative w-[100%] h-[100%]">
<form onSubmit={onSubmit}>
<label class="text-[#fff] text-[2.3em] justify-center flex m-[25px] font-bold cursor-pointer transition duration-300 ease-in-out" for="chk" aria-hidden="true">Sign up</label>
<input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="text" placeholder="Name" name='name' id='name' required="" value={name} onChange={onChange} />
<input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="date"placeholder="Date of Birth" required="" name='dob'id='dob' value={dob} onChange={onChange} />
<input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="tel" placeholder="Phone Number" name='phone' id='phone' required="" value={phone} onChange={onChange} />
<input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="email" placeholder="Email" name='email' id = 'email' required="" value={email} onChange={onChange} />
<select class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="text" placeholder="Location" name='location' id = 'location' required="" value={location} onChange={onChange} >
<option value="" selected disabled hidden>Select an Option</option>
{
locations.map((location,i)=>{
return(
<option>{location.city}</option>
)
})
}
</select>
<input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="Password" placeholder="Password" name='password' id='password' required="" value={password} onChange={onChange}/>
<input class="w-[60%] h-[35px] bg-[#e0dede] justify-center flex my-[20px] mx-auto p-[10px] border-none outline-none rounded-[5px]" type="password" placeholder="Confirm Password" name='ConfirmPassword' id='Confirm Password' required="" value={ConfirmPassword} onChange={onChange}/>
<button class="w-[60%] h-[35px] bg-[#573b8a] justify-center block my-[10px] mx-auto p-[10px] font-bold text-[1em] mt-[20px] border-none outline-none rounded-[5px] transition ease-in duration-[0.2s] cursor-pointer hover:bg-[#6d44b8] text-[#fff]">Sign up</button>
</form>
</div>
</div>
</body>
</div>
Ich versuche, eine Registrierungsseite mit Rückenwind-CSS zu entwerfen, aber wenn ich die Flex-Eigenschaft „Elemente zur Mitte ausrichten“ verwende, wird das gesamte Formular zentriert und eine vertikale Bildlaufleiste wird angezeigt, und ich kann den vertikalen Bildlauf nicht entfernen. Es wäre großartig, wenn jemand einen Weg finden könnte, dieses Problem zu lösen.
我无法找到滚动条。虽然，你可以通过在
index.css文件中添加这个实用程序来隐藏滚动条。@layer utilities { /* Chrome, Safari and Opera */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } }然后你只需要在你想要的div中添加
no-scrollbar类。