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

Question

我正在使用 CSS 来设计我的 HTML 页面。

我可以使用选择器吗：

form input[type="text"]

改变输入文字的形式？只有一个和其他人一起 CSS?

Answer 1

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

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

form input[type="text"] {}

将首先设置关卡样式，仅输入键入的文本

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

将样式设置为第一个唯一输入

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

将使用 class "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; }

这将仅针对带有 class“foo”

的第一个输入

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

这将以 class“bar”

为目标的第二个输入

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

Click here to view on CodePen

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

Answer 3

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

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 = '';        
  });

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

CSS form input[type="text"] selector

html

css

css-selectors