CODEWITHSUNDEEP
javascripthtmlcssreactjsnext.js
Jacob
Jacob

Reputation: 263

Trouble Styling HTML Input in Next.js

I am having trouble styling html form elements in Next.js. I cannot get the CSS to work using a simple class name from the imported CSS stylesheet, but I have had success with inline styling using

style={{                   
    width: "300px",
    height: "50px",
    paddingLeft: "10px",
    paddingTop: "5px",
    border: "none", 
}}

The problem is, when I select the form it adds an unwanted inner border. I need to add an input:selected {border: "none"} styling. I read this is a limitation with inline styling and I would have to use a CSS-in-JS library. It just so happens Next.js has a built in library that does this. Unfortunately, using the library is not able to override and style my input. I have tested and have had success on other elements with this library, however, the input element is not working. Here is what I 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>

Whereas I have tried a few variations of the selector:

Lastly, in case if this is related, my border box on my submit button will not go fully "white" as instructed. Instead it is white on the top and left borders and light gray on the right and bottom borders. I have included a screenshot with the issues presented. It has the added inline styling with the inner border that presents itself after selected as well as the gray border issue.

enter image description here

Upvotes: 1

Views: 4134

Answers (2)

Akshit Dandyan
Akshit Dandyan

Reputation: 11

You can make it's color transparent by adding focus:ring-transparent to className.

Upvotes: 1

Nathan
Nathan

Reputation: 949

In your global css you can add the code below to remove borders on input or textarea focus:

textarea:focus, input:focus{
    outline: none;
}

Upvotes: 1

Related Questions