Question

我正在使用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。 / p>

这些是我的sass风格

.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使得点击它时不会有任何下拉。

有没有人有自定义样式的选择下拉列表的解决方案，以及无框阴影问题？谢谢！

Answer 1

申请“职位：亲属;”到受影响的输入字段。

css饼不仅仅在字段元素上工作

1 个答案: