1

私はie8を使用していますが、他のバージョンについては知りません。私はいたるところでパイを使用していますが、通常は問題なく動作します。ただし、すべてのフォーム入力要素には、ボックスの影と境界線の半径があり、境界線はありません (ほとんどすべてのスタイル)。FF/Safari/Chrome ではすべて問題ありませんが、IE ではフォームにボックス シャドウがありません。

これを使用して、選択ドロップダウンフィールドのスタイルもカスタム設定しました（coffeescriptで）

$.fn.extend customStyle: (options) ->
  if not $.browser.msie or ($.browser.msie and $.browser.version > 6)
    @each ->
      currentSelected = $(this).find(":selected")
      $(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">' + currentSelected.text() + '</span></span>').css 
        position: 'absolute'
        opacity: 0
        fontSize: $(this).next().css("font-size")

      selectBoxSpan = $(this).next()
      selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css("padding-left")) - parseInt(selectBoxSpan.css("padding-right"))
      selectBoxSpanInner = selectBoxSpan.find(":first-child")
      selectBoxSpan.css display: "inline-block"
      selectBoxSpanInner.css 
        width: selectBoxWidth
        display: "inline-block"

      selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css("padding-top")) + parseInt(selectBoxSpan.css("padding-bottom"))
      $(this).height(selectBoxHeight).change ->
        selectBoxSpanInner.text($(this).find(":selected").text()).parent().addClass "changed"

と呼び出し $('select').customStyle()ます。基本的に、オリジナルを使用しながら、新しいメニュースタイルとなるスタイルspanをオリジナルの下に追加し、不透明度を介してオリジナルを隠します。<select><options>select

これらは私の生意気なスタイルです

.customStyleSelectBox 
  +border-radius(4px)
  +box-shadow(0 1px 1px silver inset)
  +pie /*adds pie.htc behavior */
  position: relative
  z-index: 0
  width: 70px
  background-color: white
  color: #333
  font-size: 12px
  padding: 7px

これは以前は IE で機能していました (少なくとも は<select>正しくスタイルされ、実際に表示されていました) が、現在は機能していません (完全に白いフィールド シルエットの束が互いに融合し、次の入力フィールドに溶け込んでいます。とにかく、それが機能した場合、z-index/positioning により、クリックしても何もドロップダウンしないようになります。

カスタム スタイルの選択ドロップダウンとボックス シャドウの問題に対する解決策はありますか? ありがとう！

4

1 に答える 1