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

使用id target css -

#thesubmit {
    /*css for the item with this id only, in this case the button */
}

Answer 2

将你的CSS放入＆＃34; style＆＃34;标签，它会工作！复制了您的代码，提交按钮具有自己的背景颜色！

Answer 3

你可以这样做：

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

<强> DEMO HERE

在表单中设置提交按钮的样式

3 个答案: