如何使用 Css 格式化文本框答案

【问题标题】：How to Format text boxes with Css如何使用 Css 格式化文本框
【发布时间】：2016-03-28 18:19:35
【问题描述】：

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

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

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

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

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

【问题讨论】：

【解决方案1】：

John 如果你给文本框 <input type="text" class="commonTextBoxes"> 一个类，那么你就不必定义：

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

而只是使用类名：

 .commonTextBoxes
{
   ...css
}

如果你想将 CSS 应用到三个文本框，然后给它们三个类并执行以下操作：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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 个文本框具有“myTextBox”类，因此 CSS 代码适用于所有 class="myTextBox" 字段中的文本框

工作示例 - JSfiddle

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

【讨论】：