Question

我想知道使用纯CSS做什么是最好的。

情况：

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

我的问题

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

我的解决方案

我现在已经解决了这个问题：

.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" />

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

提前致谢：）！

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" />

Answer 2

你的方法很不错......

.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" />

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!">

用户了解要输入的内容。

Answer 4

您可以使用：

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

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

在CSS中设置TextBox样式的最佳方法

4 个答案: