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;
}

This doesn't compile because it tries to generate malformed CSS. — helderdarocha, May 19 '14 at 02:15

Matthew · Answer 1 · 2014-06-02T05:41:43.123

71

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;
});

edited Jun 02 '14 at 05:41

answered May 19 '14 at 04:08

Matthew

2,871
5
34
59

2

which LESS version are you using - it does not compile for me – Möhre Nov 18 '14 at 10:08
3

works for me with `lessc -v` 2.0.0. Ampersand and passed-in rules makes this way more useful than the accepted answer. – amwinter Dec 24 '14 at 19:42
Thanks for the nice syntax! What purpose do the parens serve after `@rules()`? I thought parens were only used for parametric mixins? – ptim Feb 25 '15 at 22:33
Does `[placeholder](@rules) { ... }` work as well? I would like to omit the redundant class. – connexo Aug 20 '15 at 07:39
1

why the two `moz-placeholders`? – Gianfranco P. Aug 26 '15 at 15:11
1

@GianPaJ One is for firefox 4-18 (the one with a single colon) and the other with two colons is for firefox 19+. – h2ooooooo Jan 15 '16 at 13:30
I get a syntax error when trying to compile this: `SyntaxError: Rulesets cannot be evaluated on a property` – Dave Lunny Feb 05 '17 at 20:21

score 15 · Accepted Answer · answered May 19 '14 at 02:23

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)

This works and clarifies the use of the @arguments parameter. This helped get me to my final mixin that allows for any placeholder rules. — Matthew, May 19 '14 at 04:06

Marc · Answer 3 · 2014-05-19T13:25:52.543

2

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;
    }
}

edited May 19 '14 at 13:25

answered May 19 '14 at 02:09

Marc

561
5
17

CSS LESS Placeholder Mixin

3 Answers3