css pie не работает только с элементами поля - PullRequest
Новая
       29

css pie не работает только с элементами поля

1 голос
/ 08 октября 2011

Я использую ie8, не знаю о других версиях. Я использую пирог повсюду, и он обычно работает нормально. Тем не менее, все мои элементы ввода формы имеют прямоугольную тень и радиус границы, и не имеют границы (почти все стили для этого). В FF / Safari / Chrome все хорошо, но в IE формам не хватает тени.

Я также создал собственные выпадающие поля select, используя это (в 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 / позиционирование делает так, чтобы при нажатии на него ничего не выпадало.

У кого-нибудь есть решение для выпадающих меню выбора с пользовательскими стилями и проблема тени без коробки? Спасибо!

1 Ответ

0 голосов
/ 11 марта 2014

применить "позиция: относительная;" в соответствующие поля ввода.

...