「スライドドア」を使用して入力ボタンのスタイルを設定する

Question

変更できないサードパーティのHTMLを使用しているウェブページがあります。しかし私はCSSスタイルシートを編集することができます。私はページのデフォルトの入力ボタンのために交換したい "スライドドア"スタイルのボタンを持っていますが、CSSのみを使用してそれを行う方法を理解することはできません。ここで

は、ボタンのHTMLです：

.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 */ 
} 

：

<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です

Answer 1

ネストされた背景結合（スライドドアとも呼ばれます）には、外側（背景）と内側（背景画像の終端部分を含む）の2つの要素が必要です。スタンドアロンの<入力しか持っていなければ、あなたは立ち往生しています。

あなたが言及した< div>を選択する方法がわかっている場合は、これを外側の要素として使用し、内側のボタンとして自然な背景色を削除します。外側のdivが内側の<入力と同じ幅/高さであることを確認する必要がありますが、おそらく浮動小数点数（浮動小数点数に付属する 'shrink-to-fit'動作を有効にするために）左に浮動します。また、ボタンの上マージンとその上の余白を考慮する必要があります。

ただし、問題のボタンは固定ピクセルのページ上のサイズであるため、実際にネストされた背景を使用する必要はありません。あなたはボタンのための右のdimensonsの1つの背景を作ることができます。

Answer 2

あなたの唯一の他の選択肢は、JavaScriptを使用して、...ボタンを動的に挿入することです。通常、スライドドアのボタンに使用されるタグです。しかし、JSを無効にしても機能しないため、これはお勧めできません。

Answer 3

あなたの代わりに入力要素のボタン要素を使用することができます。 以下の記事は非常に便利です。あなただけのことを注意し、提出するよう、このボタンを使用してに依存している場合

• http://jedisthlm.com/2008/03/27/flexible-css-buttons/
• http://robertnyman.com/2008/03/13/styling-buttons-and-achieving-sliding-doors-with-them/

あなたはまだ入力のように提出して投稿タイプを使用することができますが、しかし

を行いますIEを使用しているとき。 .net Webアプリケーションのセキュリティ例外を与えるボタンの内容も送信します。

*編集すると、別のリンクがオリジナルとして存在しなくなりました。