html - select 要素と radio 要素で疑似クラスが機能しない

Question

Chrome では問題なく動作する Web サイトがありますが、「IE」では機能しません。

2 つの要素が壊れています:

**1. **ラジオボタン:**** コードはこちら

 input[type='radio'] {
width: 100%;
height: 42px;
padding-top: 12px;
display: block;
float: left;
font-weight: bold;
text-decoration: none;
text-align: center;
color: #000;
background-image: url(btn-toggle-up.gif);
background-repeat: repeat-x;
}

スクリーンショット:

クロムのスクリーンショット:

2.要素を選択します： コードは次のとおりです

select {
height: 42px;
padding-left: 10px;
display: block;
border: none;
box-shadow: none;
vertical-align: middle;
line-height: 42px;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background-color: transparent;
background-image: url(select-arrow.gif);
background-repeat: no-repeat;
background-position: right;
}

スクリーンショット:

クロムのスクリーンショット:

これが私が使用しているコードです

select::-ms-expand{display:none;}
::-ms-check{display:none;}

少し調査した後、両方の問題を解決するための最も適切な解決策の1つにたどり着きました. しかし、私の要素では機能しないようで、まだバグがあります。

これを IE7 と IE8 でテストしました。

Answer 1

appearanceChrome ではサポートされていますが、IE ではサポートされていない非標準のプロパティを使用しています。::-ms-expandおよびのような疑似要素は::-ms-check、IE 10 以降でのみ機能します。

フォーム コントロールはスタイルが難しいことが知られているため、ブラウザー間で一貫した外観が必要な場合は、jQuery UIなどの UI ライブラリを使用するか、デザイナーでフォーム コントロールのスタイルを再検討してください。