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;
}

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

有关Attribute selectors

的更多信息

但是，我想，你想要的是：

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

或

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

这是css的基础知识。

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

使用不同样式格式化不同的输入

1 个答案: