0

非常に簡単で基本的な質問ですが、オンラインで答えが見つからないようです。

CSS では、純粋にフォームに基づいて「送信」のスタイルを設定することは可能ですか? さらに、これを行わず、代わりに #subit_search_form のような特定の名前を使用する理由はありますか?

4

4 に答える 4

3

もちろん。フォームの id が であるMyFormとすると、CSS は次のようになります。

#MyForm button
{
}

これが実際の例です

buttonこれにより、すべての要素が id のフォームでスタイルされMyFormます。

于 2013-05-22T10:07:00.747 に答える
2

スタイルを設定する必要があるフックによって異なります...フォームにIDを指定してから...

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

CSS:

#certain-form button { ..your unique styles.. }
于 2013-05-22T10:07:23.293 に答える
1

はい、可能です。これが解決策です。

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;
}

お役に立てれば。

編集

特定の属性でターゲティングしたい場合。これが解決策です。

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;
}

あるいは、これも使用できます。

于 2013-05-22T10:09:37.657 に答える
0

あなたの問題は解決されましたが、共有したいだけです..

submitのようなフォームの特定の名前を使用する代わりにスタイルを追加する場合は#subit_search_form、jquery セレクターformを withnameおよびinputwith で使用typeして css スタイルを追加できます。

<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

しかし、私は @musefan のソリューションを使用して、button

于 2013-05-22T10:41:35.073 に答える