Question

我无法更改输入元素的宽度（使用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"
    />

有人可以告诉我发生了什么以及如何解决这个问题吗？

Answer 1

输入需要属性class而不是className

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

input元素应该包含class而不是className。

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

CSS无法在表单输入

3 个答案: