I'm encountering difficulties when trying to style HTML form elements in Next.js. I've been unsuccessful in applying CSS using a simple class name from the imported stylesheet, but have managed to achieve some success with inline styling by using the following code:
style={{
width: "300px",
height: "50px",
paddingLeft: "10px",
paddingTop: "5px",
border: "none",
}}
The issue arises when selecting the form as it adds an unwanted inner border. To resolve this, I need to add a input:selected {border: "none";} styling. I've read that this is a limitation of inline styling and may require the use of a CSS-in-JS library. Conveniently, Next.js has a built-in library for this purpose. However, despite my attempts, I haven't been able to successfully style the input element using this library. While other elements have responded well to the library's styling, the input element remains unaffected. Here is what I currently have:
<form className="subscribeInput" style={{ paddingBottom: "100px" }}>
<input
style={{}}
type="text"
id="email"
name="email"
placeholder="Email Address"
/>
<style jsx>{`
.subscribeInput input[type="text"] {
width: 300px;
height: 50px;
padding-left: 10px;
padding-top: 5px;
border: none;
}
`}</style>
<button
style={{
width: "100px",
height: "50px",
borderColor: "white",
paddingLeft: "10px",
paddingTop: "5px",
backgroundColor: "black",
marginLeft: "20px",
color: "white",
}}
type="submit"
>
{" "}Signup{" "}
</button>
</form>
I've tried various selector variations such as:
- .subscribeInput {}
- .subscribeInput input {}
- input {}
- input[type="text"]
Lastly, there seems to be an issue related to the border box on my submit button not fully appearing as "white." Instead, it displays white borders on the top and left sides but light gray borders on the right and bottom edges. I've attached a screenshot showcasing both issues - the inner border after selection and the gray border problem.