Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I style just the submit button with CSS?
    primarykey
    data
    text
    <p>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: </p> <pre><code> #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; } </code></pre> <p>And my HTML:</p> <pre><code> &lt;div id="logon"&gt;&lt;form action="login_r.php" method="POST"&gt; &lt;input name="myusername" type="text" size="40" placeholder="Username..." /&gt; &lt;input name="mypassword" type="password" size="40" placeholder="Password..." /&gt;&lt;input type="button" value="Log In"&gt;&lt;/form&gt;&lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload