CSS LESS Placeholder Mixin

css less mixins
Aydus-Matthew picture Aydus-Matthew · May 19, 2014 · Viewed 20.8k times · Source

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

Aydus-Matthew picture Aydus-Matthew · May 19, 2014

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

Related questions

How to set keyframes name in LESS

I try to set up this LESS mixin for CSS animation keyframes: .keyframes(@name, @from, @to) {; @-webkit-keyframes "@name" { from { @from; } to { @to; } } } but there is some problem with name pharse, is there any option to do this corectly?

Read More
CSS-Less class extend class with pseudo class

I was wondering how I could do something like the following with less css: .btn { color : black; } .btn:hover { color : white; } .btn-foo { .btn; &:hover { .btn:hover; } } Of-course this is just an example, what need to point is if there …

Read More
LESS mix-in for nth-child?

I'm trying to make a LESS mixin that will give me this output: .resource:nth-child(8n+1) { clear: left; } I've got this so far: .wrap-every(@n) { &:nth-child(@n + "n+1") { // parse error on this line clear: left; } } .resource { .wrap-every(8); } But it's …

Read More