html - 用不同的样式格式化不同的输入

Question

我有一个带有以下代码的 rails 模板表单：

<div class="field">
    <%= f.label :title %><br />
    <%= f.text_field :title %>
</div>
...
<div class="actions">
<%= f.submit %>
</div>

这又会产生：

<div class="field">
<label for="item_title">Title</label><br />
<input id="item_title" name="item[title]" size="30" type="text" />
</div>
...
<div class="actions">
<input name="commit" type="submit" value="Create Item" />
</div>

我目前将其用作 application.css 的一部分：

input{
color:#000000;
padding:2px;
background-color:#F8F8F8;
border:1px solid #66CC00;
}

如何将这些样式设置为与 application.css 文件分开的元素？我已经尝试过.text_field{#styles here}，只是.field{#styles here}在文件中，但没有运气。

我基本上希望它们看起来“不错”，但不要让它们如此相似。

Answer 1

像这样使用 css 属性选择器：

input[name=item\[title\]] {
    color: red;
}

例如，根据名称选择输入（如果您没有可用的类属性）。

有关属性选择器的更多信息

但是，我猜你想要的是：

.field input[type=text] {
    color: red;
}

或者

.actions input[type=text] {
    color: red;
}

这是css的基础。

如果您想了解有关样式输入元素的更多信息，请参阅其他答案。