css pie not working on field elements only

Question

I'm using ie8, don't know about other versions. I'm using pie all over the place and it generally works ok. However, all my form input elements have a box shadow and border radius, and no border (pretty much all the styles for it). In FF/Safari/Chrome all is well, but in IE, the forms lack their box-shadow.

I've also custom-styled my select dropdown fields using this (in 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"

and calling $('select').customStyle(). Essentially it appends a styled span below the original <select> that will be the new menu style, while still using the original <options>, while hiding the original select via opacity.

These are my sass styles

.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

This was working in IE before (at least the <select> was styled correctly and was actually showing up), but now it's not (now a bunch of field silhouettes that are completely white, melding into each other and into the next input field, not sure what changed. And anyway if it worked the z-index/positioning makes it so that nothing dropdowns when you click it.

Does anyone have a solution for the select dropdowns with custom styles, and the no box shadow problem? Thanks!

IE8 does not support the border-radius, next to that you have to provide some code to get help.. or http://jsfiddle.net/ — Hedde van der Heide, Oct 08 '11 at 08:34
pretty sure I mentioned css pie in the header, and in the first couple sentences. — butterywombat, Oct 08 '11 at 08:38
I've got a feeling that CSS3 PIE can't apply a lot of its magic to form elements. Don't take my word on it though. — thirtydot, Oct 08 '11 at 12:19
it works, it just is not working correctly because it is hidden behind other elements or something. — butterywombat, Oct 18 '11 at 23:52

score 0 · Answer 1 · answered Mar 10 '14 at 22:28

0

apply "position: relative;" to the affected input fields.

answered Mar 10 '14 at 22:28

Michael

11
3

css pie not working on field elements only

1 Answers1