nathansmith / formalize

Teach your forms some manners!
http://formalize.me
1.31k stars 120 forks source link

Not sure but maybe a webkit/chrome issue #50

Closed macronomicus closed 12 years ago

macronomicus commented 12 years ago

I noticed that the little icon arrow wasn't showing in webkit and had to alter my formalize.css adding the !Important declarations to bring in the arrow image, then I added the background gradient tags including the image bit at the end after a comma to be sure the gradient and the image load/show together.

This worked for me, perhaps I fucked around with formalize.css too much lol I dunno... Cheers for the awesome code, im loving the flexibility using this in my Drupal themes.

@media (-webkit-min-device-pixel-ratio: 0) {
  select[size],
  select[multiple],
  select[multiple][size] {
    background-image: none;
    padding-right: 3px;
  }

  select,
  select[size="0"],
  select[size="1"] {

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,114,47,0.66)), color-stop(66%,rgba(206,190,140,0.68)), color-stop(100%,rgba(237,221,181,0.69))),url('../images/select_arrow.gif?1298351050') !Important; /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(135,114,47,0.66) 0%,rgba(206,190,140,0.68) 66%,rgba(237,221,181,0.69) 100%),url('../images/select_arrow.gif?1298351050') !Important; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(135,114,47,0.66) 0%,rgba(206,190,140,0.68) 66%,rgba(237,221,181,0.69) 100%),url('../images/select_arrow.gif?1298351050') !Important; /* Opera 11.10+ */

    background-repeat: no-repeat !Important;
    background-position: right center !Important;
    padding-right: 20px !Important;
  }
nathansmith commented 12 years ago

Interesting. I hadn't tried adding both a gradient and a graphic background image on a select before.

I'm going to mark this issue as "closed", simply because it's not a bug with the Formalize code itself, but that's a cool trick (to get both to work).

macronomicus commented 12 years ago

yeah I was glad it worked I couldn't bare having no little icon arrow in there, the gradients look nice with formalize, still had to add image fallbacks for the MS IE feebleware though, even ie9 often fails gradients on many things...

nathansmith commented 12 years ago

Yeah, that's ultimately why I went with plain white. IE and Opera don't seem to like background images on <select> for whatever reason.