How can I style just the submit button with CSS?

Question

So I want my submit button to be a different width than my other input fields. I am trying to do this but the submit button still has the same width. Please Help! Here is my CSS:

     #logon {
        position: absolute;
        margin-left: 60%;
        top: 10px;

    }
    #logon input { 
        display: inline;
     border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;

text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;

    }
        #logon input.button { 
        display: inline;
     border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 50px;
padding: 6px 15px 6px 35px;

text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;

    }

And my HTML:

     <div id="logon"><form action="login_r.php" method="POST"> <input name="myusername" type="text" size="40" placeholder="Username..." /> <input name="mypassword" type="password" size="40" placeholder="Password..." /><input type="button" value="Log In"></form></div>

Niet the Dark Absol · Accepted Answer · 2013-01-13 23:18:35Z

6

The correct attribute selector is:

#logon input[type='button']

However, if you're submitting a form, it should be <input type="submit" />, in which case you want

#logon input[type='submit']

answered Jan 13, 2013 at 23:18

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pointy · Accepted Answer · 2013-01-13 23:18:06Z

1

The .button selector is for the class "button". Your <input> element doesn't have a class on it. You can try this:

input[type=button] { whatever }

Personally I like <button type=submit> better than <input type=submit> because it's a lot more flexible in terms of content (things like little icons etc).

answered Jan 13, 2013 at 23:18

Pointy

415k62 gold badges600 silver badges631 bronze badges

2 Comments

cheesemacfly Over a year ago

He doesn't seem to have a type=submit button

Pointy Over a year ago

@cheesemacfly oh you're right; I saw it but I forgot after I started typing :-)

Collectives™ on Stack Overflow

How can I style just the submit button with CSS?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related