Question

非常快速和基本的问题，但我似乎找不到在线答案。

在CSS中，是否可以根据其所在的表单设置“提交”样式？此外是否有任何理由不这样做，而是使用像#subit_search_form

这样的特定名称

Answer 1

当然是。假设您的表单的ID为MyForm，您的CSS将如下所示：

#MyForm button
{
}

Here is a working example

这将使用标识为button的表单设置所有MyForm元素的样式。

Answer 2

取决于你有什么样的风格...... 给表单一个id然后......

<form id="certain-form" >
    ...
    <button type="submit">Your Button</button>
</form>

css：

#certain-form button { ..your unique styles.. }

Answer 3

是的，这是可能的。这是Solution。

HTML：

<form>
    <label>
        <input type="button" value="Button" class="button"></input>
    </label>
</form>

或

<form> <label> <input type="submit" value="Button" class="button"></input> </label> </form>

CSS：

.button { border-top: 2px solid #a3ceda; border-left: 2px solid #a3ceda; border-right: 2px solid #4f6267; border-bottom: 2px solid #4f6267; padding: 10px 20px !important; font-size: 14px !important; background-color: #c4f1fe; font-weight: bold; color: #2d525d; }

希望这有助于。

修改

如果您想使用特定属性进行定位。这是Solution。

CSS更改

input[type="submit"] { border-top: 2px solid #a3ceda; border-left: 2px solid #a3ceda; border-right: 2px solid #4f6267; border-bottom: 2px solid #4f6267; padding: 10px 20px !important; font-size: 14px !important; background-color: #c4f1fe; font-weight: bold; color: #2d525d; }

或者也可以使用它。

Answer 4

我只想分享，虽然你的问题已经解决了..

如果您要将样式添加到submit而不是使用#subit_search_form等表单的特定名称，则可以将jquery选择器form与name和{{1}一起使用使用input添加css样式。

type

的 jsffile

但我更喜欢@musefan的解决方案，使用<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $("form[name=subit_search_form] input[type=submit]").css({ "background-color": "#FE9900", "font-weight": "bold", "font-family": "Arial,Helvetica,sans-serif", "border": "1px solid #000066", "cursor": "pointer" }); </script> <form name="subit_search_form"> <input type="submit" name="submit" id="submit" value="Search" /> </form>

在特定形式内设置按钮样式

4 个答案: