Styling a button within a certain form - html

Question

Very quick and basic question but one I can't seem to find the answer to online.
In CSS, is it possible to style a "submit" based purely on the form it is in? Furthermore is there any reason to not do this, and instead to use an specific name like #subit_search_form

Answer 1

Of course it is. Lets say your form has an id of MyForm, your CSS would look like this:
#MyForm button
{
}
Here is a working example
this will style all button elements with the form with id MyForm.

Answer 2

depends on what hooks you have to style...
give the form an id and then...
<form id="certain-form" >
...
<button type="submit">Your Button</button>
</form>
The css:
#certain-form button { ..your unique styles.. }

Answer 3

Yes it is Possible.
Here is the Solution.
The HTML:
<form>
<label>
<input type="button" value="Button" class="button"></input>
</label>
</form>
OR
<form>
<label>
<input type="submit" value="Button" class="button"></input>
</label>
</form>
The 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;
}
Hope this Helps.
EDIT
If you want to target using specific attribute. Here is the Solution.
The CSS Change
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;
}
Alternatively this also can be used.

Answer 4

I just want to share, although your problem have been resolved..
If you want to add style to submit instead to use specific name of form like #subit_search_form, You could use jquery selector form with name and input with type to add css style.
<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>
jsffile
But I prefer with solution from #musefan, using button