JohnMichael JohnMichael - 6 months ago 6
HTML Question

Running into beginner's trouble styling form button in CSS

For some reason I can't style submit form buttons the way I want.
Here's how they look right now.enter image description here

This code works for normal buttons but not on form submit buttons.

#sprint1, #sprint2, #sprint3, #sprint4, #sprint5 {
width: 13%;
height: 40px;
display: inline-block;
vertical-align: top;
font-family: Verdana, "Helvetica", sans-serif;
font-size:small;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #07526e;
padding-top: 2px;
margin-left: auto;
margin-right: auto;
left: 16%;
margin-top: 2%;
position: relative;
cursor: pointer;
border: none;
background-color: #467;
border-radius: 5px;
}


As you can see the gray textboxes look hideous over the blue backgrounds.
I simply cannot go for button tags, which I have no trouble styling at all. But I have to stick with form submit buttons because they trigger a PHP function that I can't get normal buttons to do.

How do I rid these gray boxes and have the text over the blue buttons instead? Thanks very much!
Here's my fiddle

Answer
input[type=submit] {
    background-color:transparent;
   border:none;
}

This is how you apply styling to inputs. In your fiddle, you only applied styles to the <form>

edit

My example above makes the button transparent. My actual advice would be to apply the form's styling to the input to make the input blue without border, etc.