1

変更できないサードパーティの HTML を使用している Web ページがあります。ただし、CSS スタイル シートは編集できます。ページのデフォルトの入力ボタンと交換したい「引き戸」スタイルのボタンがありますが、CSS だけを使用してそれを行う方法がわかりません。

ボタンの HTML は次のとおりです。

<div>
    <input type="button" style="margin: 10px 0pt 0pt; width: 60px; height: 25px; font-size: 11px;" name="search_btn" value="Search" onclick="DoSearchSalesExpanded(searchform);"/>
</div>

そして、「引き戸」メソッドを使用する、私が持っている既存のボタンの CSS は次のとおりです。

.clear { 
    /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}
a.button_oval {
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat scroll top right;
    color: #222;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}
a.button_oval span {
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
} 
a.button_oval:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
a.button_oval:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}
4

3 に答える 3

1

入力要素の代わりにボタン要素を使用できる場合。以下の記事は非常に役に立ちます。

入力と同じように、タイプの送信と投稿を引き続き使用できます

ただし、このボタンを送信として使用することに依存している場合は、IE を使用するときに注意してください。ボタンのコンテンツも送信します。これにより、.net Web アプリのセキュリティ例外が発生します。

*編集、元のリンクが機能しなくなったため、別のリンクが見つかりました

于 2011-06-07T05:09:41.850 に答える
0

他の唯一のオプションは、javascript を使用して、通常引き戸のボタンに使用される ...my button text... タグを動的に挿入することです。ただし、JS が無効になっていると機能しないため、これはお勧めしません。

于 2010-06-21T10:16:37.317 に答える