JohnMichael JohnMichael - 2 years ago 74
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-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 Source
input[type=submit] {

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


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download