使 simple_form 文本字段透明答案

【问题标题】：making simple_form text-fields transparent使 simple_form 文本字段透明
【发布时间】：2016-02-03 16:14:39
【问题描述】：

嘿，我希望 simple_form 的输入文本字段是透明的。这意味着我希望它融入页面背景。有没有办法做到这一点？什么是设置 simple_form 样式的好资源？

这是现在没有 css 的 html

<%= simple_form_for @reason do |f| %>
    <%= f.input :why, label: 'Tell us about it' %>
    <%= f.input :name, label: 'Name (doesn\'t have to be your real name)' %>
    <%= f.input :location %>
    <%= f.button :submit, "Put it out there", class: 'col-xs-offset-3 col-xs-6 btn btn-lg submit' %>
<% end %>

我想要做的是让它看起来好像用户在回答表单问题时直接在页面背景上写文本

【问题讨论】：

我们不会只为你做你的工作...stackoverflow.com/help/dont-ask
展示你到目前为止所拥有的，或者至少你尝试过的那些没有用的东西
怎么样？很抱歉，我对此很陌生。

标签： html css simple-form

【解决方案1】：

尝试将类或 ID 添加到您的输入字段。

例子：

HTML -> <input class="transparent_background" type="text" name="" value="">

CSS -> .transparent_background { background: transparent; }

希望这有助于您入门....除此之外，如果您不更具体和/或向我们提供您目前拥有的代码，则很难提供任何帮助...

【讨论】：

<%= simple_form_for @reason do |f| %> <%= f.input :why, label: 'Tell us about it' %> <%= f.input :name, label: 'Name (doesn\'t have to be your real name)' %> <%= f.input :location %> <%= f.button :submit, "Put it out there", class: 'col-xs-offset-3 col-xs-6 btn btn-lg submit' %> <% end %>

【解决方案2】：

我做了一个关于 CSS 中的混合输入文本字段的示例，没有类或 ID。当然，由于我不确定您的代码是如何获得的，因此这可能不适合您：

HTML 示例：

<body>
    <span>Input field: </span>
    <input type="text" name="example" value=""/>
</body>

CSS 示例：

body {
color: white;
background-color: black;
}

input:nth-child(2) {
padding: 5px;
color: white;
background: transparent;
border: 2px solid yellow;
border-radius: 5px;
font-family: sans-serif; 
}

请注意，表单样式没有“好的资源”。 CSS 总是不同的，并且可以从一个人变为另一个人。希望对您有所帮助。

【讨论】：