麻烦造型 HTML 输入 Next.js

Question

我在为 8825558328788 中的 html 表单元素设置样式时遇到问题。我无法使用导入的 CSS 样式表中的简单 class 名称使 CSS 正常工作，但我使用内联样式成功

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

问题是，当我 select 表单时，它添加了不需要的内部边框。 我需要添加一个 input:selected {border: "none"} 样式。 我读到这是内联样式的限制，我将不得不使用 CSS-in-JS 库。 碰巧 Next.js 有一个内置库可以执行此操作。 不幸的是，使用该库无法覆盖我的输入并为其设置样式。 我已经使用该库在其他元素上进行了测试并取得了成功，但是，输入元素无法正常工作。 这是我所拥有的：

            <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>

而我已经尝试了选择器的几种变体：

• 订阅输入{}
• subscribeInput 输入 {}
• 输入 {}
• 输入[类型=“文本”]

最后，如果这是相关的，我的提交按钮上的边框将不会 go 按照指示完全“白色”。 相反，它的顶部和左侧边框为白色，右侧和底部边框为浅灰色。 我附上了一张截图，其中包含所提出的问题。 它具有添加的内联样式，内部边框在选择后呈现自身以及灰色边框问题。

Answer 1

在您的全局 css 中，您可以添加以下代码以删除input或textarea焦点的边框：

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

Answer 2

您可以通过将focus:ring-transparent添加到 className 来使其颜色透明。