1

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>

2 Answers 2

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']
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).

2
  • 1
    He doesn't seem to have a type=submit button Commented Jan 13, 2013 at 23:18
  • @cheesemacfly oh you're right; I saw it but I forgot after I started typing :-)
    – Pointy
    Commented Jan 13, 2013 at 23:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.