7

IE10 では、値を含むフォーカスされたテキスト ボックスxの右側に少し追加されます。これxにより、ユーザーはテキストボックスをクリックして値をクリアできます。

他の質問は、ユーザーのビューからこの機能を削除することに触れましたが、テキストボックスの右側に検索アイコンなどの独自のアイコンを追加することに加えて、機能を維持したかったのです。残念ながら、これらのアイコンは衝突してしまうため、アイコンを移動する方法を決定する必要がありましたが、検索しても何も結果が得られませんでした。

::-ms-clear私が答えようとしてきた質問: IE10+疑似要素で使用できる他のプロパティは何ですか?

4

2 に答える 2

12

更新: 他の回答者が指摘したように、MS のドキュメントは 2013 年 6 月 19 日に更新され、利用可能なすべてのプロパティが含まれるようになりました::-ms-clear。これが現在の IE11 ではなく IE10 に適用されるかどうかは不明であるため、残りの回答は以下に残します。

完全を期すために、彼らは のドキュメントも更新しました。::-ms-revealこれは とまったく同じように見えます::-ms-clear。

以下の回答は、少なくとも IE10 に適用されます。

実験につながる完全なリストを見つけることができません。

::-ms-clear {
   margin: *; /* except margin-left */
   background: *;
   color: *;
   display: none|block;
   visibility: *;
}

残念ながら、IE の開発者モード (F12) をだまし::-ms-clearてスタイル ツリーのプロパティを表示させることはできませんでした。そのため、手動で試し、ページをリロードして実験する必要がありました。を追加して不正行為を試みましonblur=this.focus()たが、うまくいきませんでした。

何かを行い、有用であると思われる CSS プロパティ:

  • margin: 余白により、テキストボックスの右側からずらすことができました。アイコンのサイズに加えて 1 ～ 3 ピクセルをシフトして、バッファーを作成しました。動作margin-leftしないようです。
  • background: だけの背景x。設定を適用するとbackground、目的のコンテンツがその背後に置かれます。x!を置き換えるものではありません。
  • color: の色を制御しxます。
  • display: 私をここに連れてきた質問にあるnoneように、x.
  • visibility: と同様に期待どおりに動作するようdisplayです。

とを組み合わせて、 の指定されたサイズ (約 20px のように見えます)内に収まる限り、 を別の背景画像に置き換えることができますが、それは私が注目しているだけです。colorbackgroundxx

::-ms-clear {
    color: transparent;
    background: no-repeat url("../path/to/image") center;
}

何かを行ったが、役に立たなかった CSS プロパティ:

  • padding: に影響しますがx、実際にその効果を期待していたわけではありません (すべてがアイコンを隠しているか、少なくともビューから移動しているように見えました)。
  • position: と同じ動作padding。確かに、私はデザイナーよりもプログラマーに近いので、これは私自身の欠点かもしれません。

私が推測した CSS プロパティは何かをするかもしれませんが、まったく何もしませんでした:

  • text-align
  • float

他の CSS 疑似要素を追加しても影響はありません::-ms-clear。具体的には、 で試し::afterてみ::beforeましたがcontent: "y"、どちらも結果が得られませんでした。

明らかに、テキスト ボックスに適用するコンパニオン アイコンのサイズによって異なりますが、私は 14 ～ 16 ピクセルのアイコンを使用しており、右揃えのアイコンの左にシフトする明確なギャップをmargin-right: 17px与えていることがわかりました。興味深いことに、効果がないように見えますが、 に負の値を使用できます。xxmargin-leftmargin-right

最終的に使用した実際の CSS で、アイコンがx.

[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear {
    margin-right: 17px;
}

私のアイコンはすべて同じ基本名 を共有していますtbc-icon-。これは、::-ms-clear疑似要素が適用されるたびに、すべてのアイコンに自動的に適用されることを意味します。それ以外の場合、疑似要素はデフォルトの方法で動作します。

興味深いことに、::-ms-reveal同じように動作するようです。また、パスワード フィールドにアイコンを適用する場合 (私が期待する可能性ははるかに低いと思います)、上記の例に従うことができます。

[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear,
[class^="tbc-icon-"]::-ms-reveal, [class*=" tbc-icon-"]::-ms-reveal {
    margin-right: 17px;
}
于 2013-03-17T23:55:55.723 に答える
1

少なくとも 1 つのリストが MS サイトで入手できます。 http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx

（しかし、多分私は質問を誤解しました。）

于 2013-07-01T14:14:20.103 に答える