在CSS中最佳的文本框样式方式是什么？

Question

我想知道如何使用纯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 中，高级搜索文本框的代码可能看起来像这样：

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

这是最好的方法吗？还是有其他选择可用？对于只有一个文本框，这是可以做到的，但如果我需要在其他页面上添加更多文本框呢？

提前感谢 :)！

- Baklap4

---

对我来说，你的方法最有意义，但如果你有许多子集，可能会很难维护。 - Zach Saucier

我知道对吧..这就是为什么我想知道别人是怎么做的..但如果这是唯一的方法..嗯 :( - Baklap4

Answer 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;
}

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

- Neograph734

---

这看起来很好，清晰明了 :) 我应该把文本框的CSS都放在一个文件中以便更好地维护吗？ - Baklap4

这对我来说是最有意义的。如果有许多子集，出于可维护性考虑，我建议在某个地方创建一个全新的类。 - Zach Saucier

@Baklap4 是的，如果可能的话，尽量使用一个样式表。 - Zach Saucier

好的，谢谢 :) 7分钟后我会接受这个答案(: 时间限制太棒了 :P - Baklap4

Answer 2

您可以使用：

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

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

- Irfan TahirKheli

Answer 3

你也想在空输入框中放置一些文本（占位符）

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

<input type="text" class="myClass" id="fname" placeholder="Enter First Name Here!">

用户需要了解要输入什么内容。

- user3123529

---

这完全是离题的，太糟糕了我不能点踩 :P - Baklap4

Answer 4

你的方法相当不错…

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

<input type="text" class="myclass" />

- user3119163