How to apply same style to multiple pseudo classes in less

Question

I want to apply same styling to different browsers for placeholders pseudo class. I am doing it like this.

    .input-placeholder{
        &::-webkit-input-placeholder
        {
            color: #7B8E9B;
            font-weight: 500;
            font-size: 16px;
            padding: 0 40px 0 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: inherit;
            line-height: 16px;
        }
    }

    .input-placeholder{
        &:-ms-input-placeholder
        {
            color: #7B8E9B;
            font-weight: 500;
            font-size: 16px;
            padding: 0 40px 0 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: inherit;
            line-height: 16px;
        }
    }

When I try to combine them like this, It doesn't work.

   .input-placeholder::-webkit-input-placeholder, .input-placeholder:-ms-input-placeholder, .input-placeholder::-moz-placeholder, .input-placeholder:-moz-placeholder{
      color: #7B8E9B;
      font-weight: 500;
      font-size: 16px;
      padding: 0 40px 0 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: inherit;
      line-height: 16px;
    }

I tried in LESS way also, but it's not working:

    .input-placeholder{
        &,
        &::-webkit-input-placeholder,
        &:-ms-input-placeholder,
        &:-moz-placeholder,
        &::-moz-placeholder
        {
            color: #7B8E9B;
            font-weight: 500;
            font-size: 16px;
            padding: 0 40px 0 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: inherit;
            line-height: 16px;
        }
    }

Can anyone please suggest me how can we combine these classes?

I assume it is because browsers ignore rules contained in invalid selectors. Every browser finds invalid selectors if you combine vendor-prefixed rulesets. — connexo, Jan 19 '18 at 08:57

connexo · Accepted Answer · 2018-01-19T09:03:25.097

3

I assume it is because browsers ignore rules contained in invalid selectors. Every browser finds invalid selectors if you combine vendor-prefixed rulesets.

To avoid repetition, you can use a mixin:

.input-placeholder-mixin() {
    color: #7B8E9B;
    font-weight: 500;
    font-size: 16px;
    padding: 0 40px 0 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: inherit;
    line-height: 16px;
}
.input-placeholder {
    .input-placeholder-mixin;
}
.input-placeholder::-webkit-input-placeholder {
    .input-placeholder-mixin;
}
.input-placeholder:-ms-input-placeholder {
    .input-placeholder-mixin;
}
/* etc */

edited Jan 19 '18 at 09:03

answered Jan 19 '18 at 09:02

connexo

53,704
14
91
128

Thanks for the answer. But if it ignores the invalid selectors, then also it should at least apply the class to the chrome as it is the first selector. Please correct me. – Rinkesh Golwala Jan 19 '18 at 09:03
2

@Rinkksh *it should at least apply the class to the chrome as it is the first selector* - no, the whole selector list is considered invalid in this case and should be ignored per standard: https://stackoverflow.com/questions/16982449, https://stackoverflow.com/questions/13816764 etc. – seven-phases-max Jan 19 '18 at 10:05

How to apply same style to multiple pseudo classes in less

1 Answers1