CSS无法在表单输入上设置宽度和其他属性答案

【问题标题】：CSS Can't set width and other attributes on form inputCSS无法在表单输入上设置宽度和其他属性
【发布时间】：2018-11-27 22:10:27
【问题描述】：

我无法更改输入元素的宽度（使用 normalize.css、SASS 和 React，不确定这是否重要）。这是我的代码：

.landing__sign-up-form__input{
  width: 20rem;
  padding: 2rem;
  background: red;
};

我知道这个选择器会影响输入，因为它们会变成红色。但它们不会改变大小或增加任何填充。我不使用元素 id 属性——试图坚持 BEM——所以不是这样。我还尝试使用标签选择器来查看是否可行，并尝试使用!important 覆盖可能由normalize.css 设置的任何内容或我不知道的类似内容：

input {
  max-width: 100% !important;
  width: 100%;
  min-width: 4rem;
  padding: .3rem;

  background-color: blue;
  font-size: 1.6rem;
  outline: none;

  border-radius: .6rem;
};

在这个中，background变成蓝色，但outline、padding和宽度不起作用（不确定border-radius）。

这是我有问题的输入之一：

    <input
      className = "landing__sign-up-form__input"
      type = "email"
      name = "email"
      placeholder = "bearded_yak101@yaksRus.com"
    />

谁能告诉我发生了什么以及如何解决它？

【问题讨论】：

Normalize.css 正在篡改您的 CSS 层次结构以进行输入。在输入上使用开发工具选择器并查看该页面上最高级别的元素样式。您应该会看到一个宽度集以及其他选项。您可以使用它正在使用的相同选择器，并在 CSS 中应用您想要的样式，强制使用您想要的样式。或者，查找应用默认值的位置。
将输入设置为display:inline-block，然后给它一个明确的宽度（例如width:5rem）
@JonnyBeoulve 谢谢！这让我走上了正轨。它不是 normalize.css，但使用开发工具选择器帮助我找到了它。我以后会用那么多！

标签： css reactjs input

【解决方案1】：

输入需要属性class 而不是className

.landing__sign-up-form__input{
    width: 20rem;
    padding: 2rem;
    background: red;
};

<input
    class = "landing__sign-up-form__input"
    type = "email"
    name = "email"
    placeholder = "some_email@some_domain.com"
/>

【讨论】：

感谢您的回答。在 React 中，您使用 JSX 而不是 HTML——它们看起来几乎相同，但一个区别是您必须使用 className 而不是 class。不过谢谢
实际上，这可能是我的错，因为我用 html 而不是 jsx 标记了这个问题。对不起：/
@DougSauve 编辑您的问题并将标签更改为正确的标签。将增加获得正确答案的机会。

【解决方案2】：

如果你正在 React 它的 className 或者它只是 Class

【讨论】：

【解决方案3】：

输入元素应该包含类而不是类名。

<input
    class = "landing__sign-up-form__input"
    type = "email"
    name = "email"
    placeholder = "some_email@some_domain.com"
/>

【讨论】：

如果您认为我的回答不错，可以点赞，不必复制/粘贴。