透明な div に使用したいくつかの小さな png ファイルをゆっくりと削除し、それらを CSS コードに置き換えています。
この CSS コードは FF と IE9-10 で機能し、テキスト ボックスのスタイル設定に役立ちます (クリックすると背景が変更され、赤い 1 ピクセルの境界線が追加されます)。
#searchbars input {
width: 130px;
border: 1px solid #FFF;
padding: 4px 2px 2px 10px;
font-size: .9em;
font-family: Helvetica, Arial, sans-serif;
height: 16px;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(22, 22, 22) transparent; /* #161616 /
/* RGBa with 0.28 opacity */
background: rgba(22, 22, 22, 0.28);
color: #FFF;
}
#searchbars input:active,
#searchbars input:focus {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(22, 22, 22) transparent; /* #161616 /
/* RGBa with 0.75 opacity */
background: rgba(22, 22, 22, 0.75);
border: 1px solid #ff8277;
}
IE7 の条件付きスタイルシートは次のとおりです。
/* For IE 5.5 - 7*/
#searchbars input {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#47161616, endColorstr=#47161616);
}
#searchbars input:active, #searchbars input:focus {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf161616, endColorstr=#bf161616);
}
IE8 条件付きシート:
/* For IE 8*/
#searchbars input {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#47161616, endColorstr=#47161616)";
}
#searchbars input:active, #searchbars input:focus {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf161616, endColorstr=#bf161616)";
}
IE10 開発者ツールを使用し、IE7-8-9 エンジンを使用してページをレンダリングしようとしました。
IE9/10/Firefox -> すべてが期待どおりに動作します
IE8 -> デフォルトの背景と、テキスト ボックス ( ) をクリックしたときの背景の変更input:focus
は、予期したものではありません。アルファ 16 進値が正しいにもかかわらず、不透明度が適用されていないようです。
IE7 -> デフォルトの背景が機能します。テキストボックス ( ) をクリックしたときの背景の変更がinput:focus
機能しません。また、クリックしてもテキストボックスの境界線は赤くなりません(border: 1px solid #ff8277;
元のシートのプロパティを参照)
デモページはこちら: http://www.flapane.com/calcio.php
検索ボックスは、ソーシャル共有ボタンの右側の右上隅にあります。
ヒントはありますか?
前もって感謝します