指定输入类型名称？答案

【问题标题】：Specify an input type name?指定输入类型名称？
【发布时间】：2013-05-17 14:35:54
【问题描述】：

我正在制作联系表格。现在显然我希望消息框比电子邮件和主题输入框大。所以很明显我不能只在css中输入我的输入，因为它会改变所有的盒子。我认为指定消息框会像这样

input [type="text" name="message"] {
    padding-bottom: 500px;
}

这显然行不通……那我做错了什么？

HTML

<div id="contactContent">
 <form>
 <label>Email:</label><input type="text" name="email" />
 <br>
 <label>Subject:</label><input type="text" name="subject" />
 <br>
 <label>Message:</label><input type="text" name="message" />
 </form>
</div>

CSS

#contactContent { 
    margin-top: 50px; 
    margin-left: 350px;
}
input { 
    border: none; 
    background-color: #CCCCCC; 
    margin-left: 20px; 
    margin-bottom: 5px; 
    padding-right: 250px;
    padding-top: 13px;
    padding-bottom: 13px;
}
label {
    display:inline-block;
    width:100px;
    font-family:maven;
    color: #FF6464;
    font-size: 20px;
    text-align: right;
}
input [type="text" name="message"] {
    padding-bottom: 500px;
}

【问题讨论】：

您可以为要修改的单个元素添加一个css类。但是，你为什么不直接使用 textarea 呢？
顺便说一句，有一个<input type="email" />。

标签： html css forms input

【解决方案1】：

您的选择器不正确，通过类型和名称将样式应用于元素的正确方法是：

input[type="text"][name="message"] {
    padding-bottom: 500px;
}

尽管您最好使用类或 id 来定位元素，除非您有充分的理由这样做。

【讨论】：

这样使用有什么不好？
它不如使用类或 id 高效。差别不大，但如果你有成百上千条这样的规则，你最终会得到一个不必要的大文件。

【解决方案2】：

消息框的更好选择是<textarea> 元素：

<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>

那么样式不会与输入样式竞争。

无论如何，如果出于某种原因您只需要一行输入，则另一个样式挂钩将是唯一的类或 id。

【讨论】：