Feature: input:autofill

[rjmoggach]

Please add mixins for autofill...

Eg.

    input:-webkit-autofill 
        -webkit-text-fill-color black
        -webkit-box-shadow 0 0 0px 1000px white inset

    input:-moz-autofill 
        -moz-text-fill-color black
        -moz-box-shadow 0 0 0px 1000px white inset

    input:-o-autofill 
        -o-text-fill-color black
        -o-box-shadow 0 0 0px 1000px white inset

    input:-khtml-autofill 
        -khtml-text-fill-color black
        -khtml-box-shadow 0 0 0px 1000px white inset

    input:focus:-webkit-autofill 
        -webkit-text-fill-color black
        -webkit-box-shadow 0 0 0px 1000px white inset

    input:focus:-moz-autofill 
        -moz-text-fill-color black
        -moz-box-shadow 0 0 0px 1000px white inset

    input:focus:-o-autofill 
        -o-text-fill-color black
        -o-box-shadow0 0 0px 1000px white inset

    input:focus:-khtml-autofill 
        -khtml-text-fill-color black
        -khtml-box-shadow 0 0 0px 1000px white inset

[rjmoggach]

Here's some reference:

http://stackoverflow.com/questions/22701774/change-color-of-background-input-field-for-autofill-values

http://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

[rjmoggach]

I'm sure there's a more DRY way of doing this but how's this???

autofill()
  if @background and @color
    &:-webkit-autofill
      -webkit-box-shadow 0 0 0px 1000px @background inset
      -webkit-text-fill-color @color !important
    &:-moz-autofill
      -moz-text-fill-color @color !important
      -moz-box-shadow 0 0 0px 1000px @background inset
    &:-o-autofill
      -o-text-fill-color @color !important
      -o-box-shadow 0 0 0px 1000px @background inset
    &:-khtml-autofill
      -khtml-text-fill-color @color !important
      -khtml-box-shadow 0 0 0px 1000px @background inset
  else
    warn('you need to set a color and background on your element for this to work')

if you wanted it on input:focus or input:hover you could style those separately?

[dbox]

Thanks @robmoggach. I just experienced the need for something like this on a project myself.

We're actually trying to remove all vendor prefixing stuff from Axis, and let autoprefixer take care of it. However, I'm not sure this is set to be an official w3c spec, so this might be handy to have.

I'll can look into this after we wrap up #210.