Formtastic使用CSS提交按钮样式

时间:2012-08-20 19:14:49

标签: css ruby-on-rails ruby button formtastic

我需要一些关于formtastic提交按钮样式的帮助。

视图

<%= semantic_form_for @comment || NewsComment.new, :url => news_ncomments_url(@news) do |f| %>
   <%= f.inputs do %>
       <%= f.input :body, :label => false, :required => true %>
   <% end %>
   <%= f.actions do %>
       <%= f.action :submit, :label => "Kommentar absenden" %>
   <% end %>
<% end %>

的CSS

#news_comment_submit_action {
    background: rgb(93,190,232);
    background: -moz-linear-gradient(top, rgb(93,190,232) 0%, rgb(53,156,218) 50%, rgb(35,141,211) 51%, rgb(34,139,207) 89%, rgb(32,131,196) 95%, rgb(32,131,196) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(93,190,232)), color-stop(50%,rgb(53,156,218)), color-stop(51%,rgb(35,141,211)), color-stop(89%,rgb(34,139,207)), color-stop(95%,rgb(32,131,196)), color-stop(100%,rgb(32,131,196)));
    background: -webkit-linear-gradient(top, rgb(93,190,232) 0%,rgb(53,156,218) 50%,rgb(35,141,211) 51%,rgb(34,139,207) 89%,rgb(32,131,196) 95%,rgb(32,131,196) 100%);
    background: -o-linear-gradient(top, rgb(93,190,232) 0%,rgb(53,156,218) 50%,rgb(35,141,211) 51%,rgb(34,139,207) 89%,rgb(32,131,196) 95%,rgb(32,131,196) 100%);
    background: -ms-linear-gradient(top, rgb(93,190,232) 0%,rgb(53,156,218) 50%,rgb(35,141,211) 51%,rgb(34,139,207) 89%,rgb(32,131,196) 95%,rgb(32,131,196) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5dbee8', endColorstr='#2083c4',GradientType=0 );
    background: linear-gradient(top, rgb(93,190,232) 0%,rgb(53,156,218) 50%,rgb(35,141,211) 51%,rgb(34,139,207) 89%,rgb(32,131,196) 95%,rgb(32,131,196) 100%);text-decoration: underline;
    color: #fff;
    text-decoration: none;
    width: 134px;
    height:32px;
    padding: 5px;
    position: relative;
    display: block;
    left: -5px;
    margin-bottom: 12px;
    -webkit-box-shadow: 0 0 6px #999;
    -moz-box-shadow: 0 0 6px #999;
    box-shadow: 0 0 6px #999;
}

图像

http://img.i7x.de/i/PMkmqY/button_display_error.png

有谁知道如何禁用这个丑陋的灰色背景?

1 个答案:

答案 0 :(得分:2)

你必须设置按钮的样式:

input[type="submit"] {
    background: transparent;
    border: 0;
}

你应该比input[type="submit"]更具体,但你明白了。

在你的照片中,你似乎在为按钮的容器设计样式,而不是按钮本身。