如何使用 Css 格式化文本框

Question

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

我想使用如下所示的内容，但我认为这会更改我页面中所有文本框的格式。

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

我只想更改 3 个文本框中的格式，我应该怎么做？我也尝试了类似下面的代码，但没有用。我把文本框的 class 作为 .commonTextBoxes 但没有改变。我正在尝试更改文本框的宽度和高度。

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

Answer 1

约翰，如果你给文本框 class <input type="text" class="commonTextBoxes"> 那么你不必定义：

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

而是使用 class 名称：

 .commonTextBoxes
{
   ...css
}

如果您想将 CSS 应用于三个文本框，则给它们三个 classes 并执行如下操作：

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

Answer 2

仅供进一步参考。实际上指定 class 的正确方法如下所示。有时我们可能需要这样，我们会为文本和文本区域保持相同 class...

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

Answer 3

您可以为 3 个文本框分别设置 不同的 class。我会使用这个代码：

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

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

如果3个文本框有相同的class，那就更简单了。

如果 html 代码是：

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

如您所见，它们都具有相同的 class，因此 CSS 将是；

.myTextBox {
...css
}

由于 3 个文本框具有 class 'myTextBox'，CSS 代码适用于所有字段中带有 class="myTextBox"

工作示例 - JSfiddle

希望对您有所帮助！
P.S - 你没有说输入字段的 css 代码所以我自己编了一个。

How to Format text boxes with Css