CODEWITHSUNDEEP
cssless
Rinkesh Golwala
Rinkesh Golwala

Reputation: 1049

How to apply same style to multiple pseudo classes in less

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?

Upvotes: 1

Views: 561

Answers (1)

connexo
connexo

Reputation: 56813

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 */

Upvotes: 3

Related Questions