1

input送信ボタン用のフィールドがあります：

<input id="searchSubmit" type="submit" value="Search" />

CSSデフォルトのボタンではなく、拡大鏡のように見えるように、ボタンの上に背景画像を配置しました。

これはほとんどのブラウザーで機能しますが、IE 7 とvalue画像の上に表示されるテキストに問題があります。

このテキストを要素のvalueフィールドから削除せずに取り除く簡単な方法はありますか? input効果のあるもの:

#searchSubmit input[type="submit"][value=Search] {
    text-indent:-999em !important;
}

何か案は？

4

2 に答える 2

2

このシンプルかつ洗練された回避策を CSS に追加するだけです。

残念ながら、負のインデントだけでは、IE7 のボタン要素からテキストを削除することはできませんが、text-transform: capitalize; を追加してください。そしてプレスト！

#searchSubmit {
     text-indent: -9000px;
     text-transform: capitalize;
}

ソース: http://css-tricks.com/snippets/css/remove-button-text-in-ie7/

于 2012-12-17T22:14:35.970 に答える
1

フォント サイズをゼロに設定します。*プレフィックスは IE7 (および 6) をターゲットにします。

#searchSubmit  {
    *font-size:0;
    *width:50px;
    *height:22px;
}​

ボタンはテキストに基づいてサイズ設定されるため、これを機能させるには幅と高さを指定する必要があります。

また、CSS では、アイテムに ID がある場合、セカンダリ セレクターは必要ありません。

#searchSubmit {...}

いいえ：

#searchSubmit input[type="submit"][value=Search] {...}
于 2012-12-17T22:10:22.150 に答える