Html 在 CSS 中设置 TextBox 样式的最佳方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20765310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best way to style a TextBox in CSS
提问by Baklap4
I would like to hear what's the best thing to do with pure CSS.
我想听听纯 CSS 的最佳做法是什么。
The Situation:
情况：
I'm having a textbox in which i can search for specific items. Yet now i'm also having an advanced search with almost the same textbox yet the width of the advancedSearchTextbox is less than the default one.
我有一个文本框，我可以在其中搜索特定项目。然而，现在我也使用几乎相同的文本框进行高级搜索，但高级搜索文本框的宽度小于默认值。
My Question
我的问题
What is the best way to style the textbox?
设置文本框样式的最佳方法是什么？
My Solution
我的解决方案
I've fixed this now like this:
我现在已经解决了这个问题：
.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;
}
and then in the HTML it'd look something like this for the advancedSearchTextbox:
然后在 HTML 中，advancedSearchTextbox 看起来像这样：
<input type="text" class="defaultTextBox advancedSearchTextBox" />
Is this the best way to do it? Or are there any other options available? As for just 1 other textbox it's do-able but what if i need more textboxes on other pages?
这是最好的方法吗？或者还有其他选择吗？至于其他 1 个文本框，它是可行的，但是如果我在其他页面上需要更多文本框怎么办？
Thanks in advance :)!
提前致谢 ：）！
回答by Neograph734
You could target all text boxes with input[type=text]and then explicitly define the class for the textboxes who need it.
您可以定位所有文本框，input[type=text]然后为需要它的文本框明确定义类。
You can code like below :
你可以像下面这样编码：
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" />回答by Baqer Naqvi
your approach is pretty good...
你的方法很不错...
.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" />回答by user3123529
You Also wanna put some text (placeholder) in the empty input box for the
您还想在空白输入框中放置一些文本（占位符）
.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!">user to understand what to type.
用户了解要键入的内容。
回答by Irfan TahirKheli
You can use:
您可以使用：
input[type=text]
{
/*Styles*/
}
Define your common style attributes inside this. and for extra style you can add a class then.
在其中定义您的通用样式属性。对于额外的样式，您可以添加一个类。
