How to change the color of a Contact Form 7 placeholder text

0
196
How to change the color of a Contact Form 7 placeholder text

Add this CSS code to theme options -> styling options -> custom css:

::-webkit-input-placeholder { /* WebKit browsers */
color: #000 !important;
opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000 !important;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000 !important;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #000 !important;
opacity: 1;
}

The following code will change the placeholder color for text areas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
textarea::-webkit-input-placeholder {
color: green !important;
}
textarea:-moz-placeholder { /* Firefox 18- */
color: green !important
}
textarea::-moz-placeholder {  /* Firefox 19+ */
color: green !important
}
textarea:-ms-input-placeholder { 
color: green !important
}

 

The following code will change the placeholder color specifically for a certain input type, in our case email:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
input[type="email"]::-webkit-input-placeholder {
color: blue !important;
}
input[type="email"]:-moz-placeholder { /* Firefox 18- */
color: blue !important
}
input[type="email"]::-moz-placeholder {  /* Firefox 19+ */
color: blue !important
}
input[type="email"]:-ms-input-placeholder { 
color: blue !important
}

Related Post