0

こんにちは私はこのフォームにCSSを適用しようとしています：

<form action="http://example.com/result.xml" accept-charset="UTF-8" method="get">
            <div id="search-box">
                Catalog Search:<br />
                <input type="hidden" id="rt" name="rt" value="keyword" />
                <input type="hidden" id="tp" name="tp" value="keyword" />
                <input type="text" alt="Input Box for Catalog Search" maxlength="250" 
                size="20" id="t" name="t" value=""  />
                <input type="hidden" id="ft" name="ft" value="" />
                <input type="hidden" id="l" name="l" value="9" />
                <input type="hidden" id="d" name="d" value="2" />
                <input type="hidden" id="f" name="f" value="" />
                <input type="hidden" id="av" name="av" value="" />
                <input type="submit" value="Search" class="form-submit"  />
            </div>
            </form>

[検索]ボタンと入力フィールドのスタイルを設定しようとしています。私はグーグルの検索結果とこのサイトを調べて、ボタンのスタイリングにこのフォーマットを使用することを何度も見つけました：

.submit input {
    color      : #000;
    background : #ffa20f;
    border     : 2px outset #d7b9c9;
}

しかし、これは私の検索ボタンにはまったく影響していません。そのボタンを正しく参照するにはどうすればよいですか？

4

3 に答える 3

2

CSSルールが「送信」のクラスを検索している間、検索ボタンには「フォーム送信」のクラスがあります。CSSルールを次のように変更すると、正しい要素をターゲットにする必要があります。

.form-submit
{
  color: #000;
  background: #ffa20f;
  border: 2px outset #d7b9c9;
}
于 2012-06-04T19:25:25.380 に答える
2

入力を誤ってターゲットにしているようです。親要素のIDを対象とする次のCSSを使用してから、送信ボタンを使用してみてください。

#search-box .form-submit {
   color: #000;
   background: #ffa20f;
   border: 2px outset #d7b9c9;
}

http://jsfiddle.net/WcVdn/

于 2012-06-04T19:25:50.357 に答える
1

実際にあなたがやろうとしているのは、クラスsubmitを使ってコンテナ内の入力タグをスタイリングすることです。入力タイプをスタイル設定する場合は、送信します。

input[type="submit"]{
  color: #000;
  background: #ffa20f;
  border: 2px outset #d7b9c9;

}
于 2012-06-04T19:26:38.303 に答える