Formtastic Submit Button Style with CSS

Question

I need some help with the styling of a formtastic submit button.

view

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

Image

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

Does anyone know how I can disable this ugly grey background?

Answer 1

You have to style the button itself:

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

You should probably more specific than input[type="submit"] , but you get the idea.

In your picture, it seems like you're styling the container of the button, not the button itself.