CSS表单输入[类型=“文本”]选择器

anu*_*bis 1 html css css-selectors css3

我正在使用CSS设置html页面的样式。

我可以使用选择器:

form input[type="text"]
Run Code Online (Sandbox Code Playgroud)

改变一个输入文字的形式?这个CSS只有一个与其他在一起吗?

最好的问候

Jon*_*s m 5

我真的不明白你的问题。但是你有一些选择

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

    form input[type="text"] {}
Run Code Online (Sandbox Code Playgroud)

将样式设置为第一个仅输入输入文本的样式

    form >input[type="text"] {}
Run Code Online (Sandbox Code Playgroud)

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

form input[type="text"]:first-child {}
Run Code Online (Sandbox Code Playgroud)

将使用类“ foo”对输入的文本进行样式设置

form input.foo[type="text"] { }
Run Code Online (Sandbox Code Playgroud)

所以。假设您有一个表格

<form action="" method="POST">
<input type="text" name="text" class="foo" />
<input type="text" name="text2" class="bar" />
</form>
Run Code Online (Sandbox Code Playgroud)

这将针对所有输入

form input[type="text"] { border:2px solid #000000; }
Run Code Online (Sandbox Code Playgroud)

这将仅针对类“ foo”的第一个输入

form input.foo[type="text"] { background-color:red; }
Run Code Online (Sandbox Code Playgroud)

这将针对具有类“ bar”的第二个输入

form input.bar[type="text"] { background-color:green; }
Run Code Online (Sandbox Code Playgroud)

单击此处查看CodePen