html - 样式化表单中的提交按钮

Question

我制作了一个简单的表单，但我无法让提交按钮采用自己的样式。 请告诉我为什么我不能单独设置提交按钮的样式，最好是如何只针对此按钮。

label{float:left;text-align:right;} 

input{width:44%;} 

textarea{width:99%;float:none;height:300px;} 

input{float:left;padding:20px;margin-bottom:20px;} 

textarea, input{border-radius:5px;border:thin groove #000;} 

textarea:focus, input:focus { 
    outline:none; 
    border: 1px solid #f00; 
    /* create a BIG glow */ 
    box-shadow: 0px 0px 14px #f00; 
    -moz-box-shadow: 0px 0px 14px #f00; 
    -webkit-box-shadow: 0px 0px 14px #f00; 
    border-radius:5px; 
}​ 

#thesubmit{padding:23px;background:#939;font-size:30px;border-radius:20px;} 

<form id="contact_form"> 
    <div> 
        <label for="name"></label> 
        <input type="text" name="Name" value="Enter Name" style="margin-right:20px;"/> 
    </div> 

    <div> 
        <label for="email"></label> 
        <input type="text" name="Email" value="Enter Email"/> 
    </div> 

    <div> 
        <label for="message"></label> 
        <textarea name="message" placeholder="Enter Message" id="message" rows="10" cols="50"></textarea> 
    </div> 

    <div class="button"> 
        <input type="submit" value="send now" id="thesubmit" />

Answer 1

你可以这样做:

.button input[type=submit]{ 
    background: #000;
    color: #fff;
}

DEMO HERE