css input style class supercedes declared class

[evaleah]

I have a button declared as such:

<input title="Save" class="entity-edit-action-save" type="submit" value="" />

In my css I have several classes dealing with buttons:

input[type=submit], input[type=reset], input[type=button], button
{
    background-color: #384e72;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#384e72), to(#ffffff));
    background-image: -webkit-linear-gradient(top, #384e72, #ffffff);
    background-image: -moz-linear-gradient(top, #384e72, #ffffff);
    background-image: -ms-linear-gradient(top, #384e72, #ffffff);
    background-image: -o-linear-gradient(top, #384e72, #ffffff);
    background-image: linear-gradient(top, #384e72, #ffffff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff384e72', EndColorStr='#ffffffff');
    background-size: 100% 100%;
    border: 2px solid #d7e0eb;
    border-color: rgba(215, 224, 235, 0.8);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 1px 3px rgba(102, 102, 102, 1);
    -moz-box-shadow: 0px 1px 3px rgba(102, 102, 102, 1);
    box-shadow: 0px 1px 3px rgba(102, 102, 102, 1);
    color: #f0f0f0;
    display: inline-block; /* IE is so silly */
    font-weight: bold;
    padding: 0.25em 0.75em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, button:hover
{
    background-color: #d7e0eb;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d7e0eb), to(#ffffff));
    background-image: -webkit-linear-gradient(top, #d7e0eb, #ffffff);
    background-image: -moz-linear-gradient(top, #d7e0eb, #ffffff);
    background-image: -ms-linear-gradient(top, #d7e0eb, #ffffff);
    background-image: -o-linear-gradient(top, #d7e0eb, #ffffff);
    background-image: linear-gradient(top, #d7e0eb, #ffffff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffd7e0eb', EndColorStr='#ffffffff');
    border: 2px solid #003399;
    border-color: rgba(0, 51, 153, 0.5);
    color: #384e72;
}
input[type=submit]:focus, input[type=reset]:focus, input[type=button]:focus, button:focus,
input[type=submit]:active, input[type=reset]:active, input[type=button]:active, button:active
{
    background-color: #0066aa;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2288ee), to(#0066cc));
    background-image: -webkit-linear-gradient(top, #0066cc, #2288ee);
    background-image: -moz-linear-gradient(top, #0066cc, #2288ee);
    background-image: -ms-linear-gradient(top, #0066cc, #2288ee);
    background-image: -o-linear-gradient(top, #0066cc, #2288ee);
    background-image: linear-gradient(top, #0066cc, #2288ee);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff0066cc', EndColorStr='#ff2288ee');
    border: 2px solid #003399;
    border-color: rgba(0, 51, 153, 0.8);
}

And then the class for this button in particular:

.entity-edit-action-save {
    height: 24px;
    width: 24px;
    background: url(../Content/Common/Images/Icons/save.png) no-repeat;
    background-color: transparent;
    border: 2px solid #003399;
    border-color: rgba(0, 51, 153, 0.5);
    color: #384e72;
}

The button is rendering with the above mentioned classes and not the one I have specified! How can I force the class I have specified to be the one in use and ignore the others for default types?

Thanks!

 

[evaleah]

I figured this out. I left the one class and added an input.entity-edit-action-save sized as desired and with a transparent background. Works like a charm