如何使用Css格式化文本框

Question

您好我正在尝试使用css更改3个文本框的大小。

我想使用类似下面的内容，但我想这会改变我页面中所有文本框的格式。

 input[type='text']
{
   ...css
}

我想只在3个文本框中更改格式，那我该怎么做呢？ 我也试过类似下面的代码，但是没有用。我把文本框的类放在.commonTextBoxes但不改变。我试图改变文本框的宽度和高度。

 .commonTextBoxes input[type='text']
{
   ...css
}

Answer 1

如果您将课程添加到文本框<input type="text" class="commonTextBoxes">，则John不必定义：

 .commonTextBoxes input[type='text']
{
   ...css
}

而只是使用班级名称：

 .commonTextBoxes
{
   ...css
}

如果你想将CSS应用于三个文本框，那么给它们三个类并做这样的事情：

 .commonTextBoxes1, 
 .commonTextBoxes2, 
 .commonTextBoxes3
{
   ...css
}

Answer 2

仅供进一步参考。实际上，指定类的正确方法如下所示。有些时候我们需要这样的地方，我们可以为text和textarea保留相同的类......

input[type=text].text {
    ...css
}

Answer 3

您可以为3个文本框中的每一个设置不同的类。我会使用这段代码：

.textBox1 {
...css
}
.textBox2 {
...css
}
.textBox3 {
...css {
}

上面的代码太多了，但还有另一种方法。

如果3个文本框具有相同的类，则会更容易。

如果html代码是：

<input type="text" class="myTextBox">
<input type="text" class="myTextBox">
<input type="text" class="myTextBox">

如你所见，它们都有相同的类，所以CSS就是;

.myTextBox {
...css
}

由于3个文本框具有类＆＃39; myTextBox＆＃39;，CSS代码适用于所有字段中的文本框，其中class =＆＃34; myTextBox＆＃34; <登记/>
工作示例 - JSfiddle

希望这有帮助！
P.S - 你没有说输入字段的css代码，所以我自己做了。