Opacity for placeholder

[ducdhm]

Hey guys, I think we should add more params for placeholder mixins. Such as opacity because as I knew, opacity for placeholder on FF is not 1. Here's my own placeholder mixins with color, opacity, font-family, weight and style.

.placeholder(@color; @opacity: 100; @font-family: inherit; @font-weight: inherit; @font-style: inherit) {
    &:-moz-placeholder {
        font-family: @font-family;
        font-weight: @font-weight;
        font-style: @font-style;
        color: @color;
        .opacity: (@opacity) !important;
    }

    &::-moz-placeholder {
        font-family: @font-family;
        font-weight: @font-weight;
        font-style: @font-style;
        color: @color;
        .opacity: (@opacity) !important;
    }

    &:-ms-input-placeholder {
        font-family: @font-family;
        font-weight: @font-weight;
        font-style: @font-style;
        color: @color;
        .opacity(@opacity) !important;
    }

    &::-webkit-input-placeholder {
        font-family: @font-family;
        font-weight: @font-weight;
        font-style: @font-style;
        color: @color;
        .opacity(@opacity) !important;
    }

    .placeholder {
        font-family: @font-family;
        font-weight: @font-weight;
        font-style: @font-style;
        color: @color;
        .opacity(@opacity) !important;
    }
}

It also support for jquery.placeholder plugin.

[frisi]

@ducdhm 's point is valid. the .placeholder mixin should at least add opacity: 1 to the moz-placeholder pseudo elements since firefox is adding opacity whereas other browsers do not.

this would at leas allow to have consistent cross browser styling.

.placeholder(@color:#aaa, @element: 08121991) {
  .inception (@arguments) when not (@element = 08121991) {
    @{element}::-webkit-input-placeholder {
       color: @color;
    }
    @{element}:-moz-placeholder {
       color: @color;
       opacity: 1;
    }
    @{element}::-moz-placeholder {
       color: @color;
       opacity: 1;
    }
    @{element}:-ms-input-placeholder {
       color: @color;
    }
  }
  .inception (@arguments) when (@element = 08121991) {
    &::-webkit-input-placeholder {
       color: @color;
    }
    &:-moz-placeholder {
       color: @color;
       opacity: 1;
    }
    &::-moz-placeholder {
       color: @color;
       opacity: 1;
    }
    &:-ms-input-placeholder {
       color: @color;
    }
  }
  .inception(@arguments);
}

@ducdhm can you adapt your code to the current lesshat version and create a PR in case @petrbrzek agrees?