CODEWITHSUNDEEP
cssselectorplaceholder
Shoaib Chikate
Shoaib Chikate

Reputation: 8973

not selector with placeholder

I have input type whom I am differentiating with data attributes:

I want all data-type to hide placeholder except for date field

I am not able to use :not selector. Answer with input[type="text"] will not be accepted as there may be n number of data-types apart from text and date.

    :not(input[data-type="date"])::-webkit-input-placeholder { /* WebKit browsers */
        color: transparent !important;
    }
     :not(input[data-type="date"]):-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: transparent !important;
    }
    :not(input[data-type="date"])::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: transparent !important;
    }
     :not(input[data-type="date"]):-ms-input-placeholder { /* Internet Explorer 10+ */
       color: transparent !important;
    }

    
<input data-type="text" placeholder="Enter date">
<input data-type="date" placeholder="Enter text">

Help appreciated.

Upvotes: 1

Views: 345

Answers (1)

NiZa
NiZa

Reputation: 3926

Here you are. Nice solution btw referring to transparent.

input:not([data-type="date"])::-webkit-input-placeholder { /* WebKit browsers */
  color: transparent !important;
}
input:not([data-type="date"]):-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: transparent !important;
}
input:not([data-type="date"])::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: transparent !important;
}
input:not([data-type="date"]):-ms-input-placeholder { /* Internet Explorer 10+ */
  color: transparent !important;
}
<input data-type="text" placeholder="Enter date">
<input data-type="date" placeholder="Enter text">

Upvotes: 2

Related Questions