在 CSS 中设置 TextBox 样式的最佳方法 [关闭]答案

【问题标题】：Best way to style a TextBox in CSS [closed]在 CSS 中设置 TextBox 样式的最佳方法 [关闭]
【发布时间】：2014-01-12 22:58:09
【问题描述】：

我想听听纯 CSS 的最佳用途是什么。

情况：

我有一个文本框，可以在其中搜索特定项目。然而现在我也有一个几乎相同的文本框的高级搜索，但高级搜索文本框的宽度小于默认值。

我的问题

设置文本框样式的最佳方式是什么？

我的解决方案

我现在这样解决了这个问题：

.defaultTextBox {
    padding: 0;
    height: 30px;
    position: relative;
    left: 0;
    outline: none;
    border: 1px solid #cdcdcd;
    border-color: rgba(0,0,0,.15);
    background-color: white;
    font-size: 16px;
}
.advancedSearchTextbox {
    width: 526px;
    margin-right: -4px;
}

然后在 HTML 中，advancedSearchTextbox 看起来像这样：

<input type="text" class="defaultTextBox advancedSearchTextBox" />

这是最好的方法吗？或者还有其他可用的选项吗？至于其他 1 个文本框，它是可行的，但如果我需要在其他页面上添加更多文本框怎么办？

提前致谢:)！

【问题讨论】：

对我来说，你的方法最有意义，但如果你有很多子集，可能很难维护
我知道是对的.. 这就是为什么我想知道其他人是如何做到这一点的.. 但如果这是唯一的方法.. 嗯 :(

标签： html class css

【解决方案1】：

您可以使用input[type=text] 定位所有文本框，然后为需要它的文本框明确定义类。

您可以编写如下代码：

input[type=text] {
  padding: 0;
  height: 30px;
  position: relative;
  left: 0;
  outline: none;
  border: 1px solid #cdcdcd;
  border-color: rgba(0, 0, 0, .15);
  background-color: white;
  font-size: 16px;
}

.advancedSearchTextbox {
  width: 526px;
  margin-right: -4px;
}

&lt;input type="text" class="advancedSearchTextBox" /&gt;

【讨论】：

这似乎很好很清楚 :) 我应该把文本框的 css 都放在一个文件中以获得更好的可维护性吗？
这对我来说最有意义。如果有很多子集，我建议沿线的某个地方创建一个全新的类，以实现可维护性的目的
@Baklap4 是的，如果可能，请始终尝试使用一个样式表
好的，谢谢 :) 将在 7 分钟内接受此回答（：jeeej for timelimit :P

【解决方案2】：

你可以使用：

input[type=text]
{
 /*Styles*/
}

在此定义您的常用样式属性。对于额外的样式，您可以添加一个类。

【讨论】：

【解决方案3】：

你的方法很不错……

.myclass {
    height: 20px;
    position: relative;
    border: 2px solid #cdcdcd;
    border-color: rgba(0, 0, 0, .14);
    background-color: AliceBlue;
    font-size: 14px;
}

&lt;input type="text" class="myclass" /&gt;

【讨论】：

【解决方案4】：

您还想在

的空输入框中放置一些文本（占位符）

.myClass {
   ::-webkit-input-placeholder {
    color: #f00;
  }
   ::-moz-placeholder {
    color: #f00;
  }
  /* firefox 19+ */
   :-ms-input-placeholder {
    color: #f00;
  }
  /* ie */
  input:-moz-placeholder {
    color: #f00;
  }
}

&lt;input type="text" class="myClass" id="fname" placeholder="Enter First Name Here!"&gt;

用户了解要键入的内容。

【讨论】：

这完全是离题太糟糕了，我不能投票：P