CSS LESS Placeholder Mixin

Question

I want to create a placeholder mixin as follows. However, this fails to compile in LESS version 1.7.0.

.placeholder(...) {
    ::-webkit-input-placeholder: @arguments;
    :-moz-placeholder: @arguments;
    ::-moz-placeholder: @arguments;
    :-ms-input-placeholder: @arguments;
}

Answer 1

Mixin allows for any placeholder css rules.

.placeholder(@rules) {

    &::-webkit-input-placeholder {
        @rules();
    }
    &:-moz-placeholder {
        @rules();
    }
    &::-moz-placeholder {
        @rules();
    }
    &:-ms-input-placeholder {
        @rules();
    }
}

Example usage:

.placeholder({
    color: #0000FF;
    text-transform: uppercase;
});

Answer 2

Input placeholders are selectors, not properties, and so their CSS syntax is placeholder { ... } , not placeholder: ... which you are trying to generate.

If you fix that:

.placeholder(...) {
    ::-webkit-input-placeholder {border:@arguments}
    ::-moz-placeholder {border:@arguments}
    :-ms-input-placeholder {border:@arguments}
}

It will compile, and when you call it:

.placeholder(solid; 1px; blue;);

it will generate this CSS:

::-webkit-input-placeholder {
  border: solid 1px #0000ff;
}
::-moz-placeholder {
  border: solid 1px #0000ff;
}
:-ms-input-placeholder {
  border: solid 1px #0000ff;
}

(I just included border: as an example of a generic CSS property, independent of its actual effect on an input object)

Answer 3

You are missing the curly brackets around the placeholder selectors.

The styles should be as follows:

.placeholder(@color) {
    ::-webkit-input-placeholder {
        color: @color;
    }
    :-moz-placeholder {
        color: @color;
    }
    ::-moz-placeholder {
      color: @color;
    }
}