CSS表单input[type="text"]选择器

Question

我正在使用CSS来为我的HTML页面添加样式。

我能用选择器：

form input[type="text"]

改变一个输入框的类型从文本(text)到其他类型？只需更改其中一个，其他的都使用 CSS 实现即可。

- anubis

---

请提供有关您问题的更多信息。 - Leo the lion

更改一个输入类型文本的形式。这是什么意思？使用该选择器，您可以选择所有位于<form>内且具有type="text"的<input/>元素。 - putvande

是的，使用这个选择器我可以选择所有类型为文本的输入。我能否改变表单，使用另一个选择器只针对一个类型为文本的输入？ - anubis

我已经为这个输入框添加了一个类，并使用它进行了CSS设置，但它没有采用我的新CSS，而是采用了通用的：form input[type="text"]！ - anubis

所以你有一个用于输入的类，但是你正在尝试使用问题中的选择器应用更通用的CSS？但是输入没有响应？可能是因为你的新选择器在CSS文件中更靠下或比你的类更具体。 - putvande

Answer 1

我不太明白你的问题。但是你有几个选择

将每个输入的文本都进行样式设置。<input type="text" />

form input[type="text"] {}

将首先为输入的文本设置级别样式

form >input[type="text"] {}

将仅样式化第一个输入框

form input[type="text"]:first-child {}

将使用类名为“foo”的样式来装饰输入的文本

form input.foo[type="text"] { }

所以，假设你有一个表单。

<form action="" method="POST">
<input type="text" name="text" class="foo" />
<input type="text" name="text2" class="bar" />
</form>

这将针对所有输入进行定位

form input[type="text"] { border:2px solid #000000; }

这将仅针对具有类“foo”的第一个输入进行定位。

form input.foo[type="text"] { background-color:red; }

这将针对具有类名为“bar”的第二个输入进行目标设置。

form input.bar[type="text"] { background-color:green; }

点击这里在 CodePen 上查看

- Jonas m

---

这正是我尝试过但没有成功的。但现在它可以工作了！感谢您的好解释，对于我的愚蠢问题我很抱歉！！ - anubis

Answer 2

您可以使用

input[type="text"]
input[type="button"]
input[type="password"]
input[type="number"]
input[type="email"]

例如。

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

W3School 属性选择器

- Abdulla Nilam

---

这并没有回答问题，因为原帖的作者已经知道他/她可以使用那个选择器。其次，没有输入type="mail"，而是email。 - putvande

@putvande 这就是我用一个例子来解释的内容。 - Abdulla Nilam

Answer 3

以下是一种方法，可以重置表单中所有的输入元素，只要该元素为文本类型。 这是搜索表单的一部分，您可以使用console.log查看当前元素的名称/值。 例如，您可以使用类似的方法来设置表单元素的样式。

resetForm(e) {
  const searchInput = this.formSearchUser.querySelectorAll('input[type="text"]');
  searchInput.forEach((elt) => {
    console.log(`${elt.name} = ${elt.value}`);
    if (elt.name !== "siteCode" || elt.name !== "expiredUsers") 
      elt.value = '';        
  });

- Amor Jemni