我想听听用纯 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" />
这是最好的方法吗？或者有任何其他选项可用？至于只有 1 个其他文本框可以做，但是如果我需要其他页面上的更多文本框呢？
提前感谢:)!
18
您可以使用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" />
2
您可以使用：
input[type=text]
{
/*Styles*/
}
在其中定义您的常见样式属性。对于额外的样式，您可以添加一个类。
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" />您还想在空输入框中放置一些文本（占位符）
.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!">用户了解要键入的内容。
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（63条）