- This topic has 6 replies, 2 voices, and was last updated 4 years, 3 months ago by Alex.
-
AuthorPosts
-
November 27, 2019 at 6:48 am #1079743Alex
Hello GP,
I’ve been customizing some Gravity Forms and I was happy to see that most colors set in the GP colors are supported. There is only one color that is not supported and it is the ‘Placeholder’ color. The null value text of the input controls. I’ve a dug a little and it seems this is set per browser. Something like this:
input::-webkit-input-placeholder { color: #9B9B9B; } input:-ms-input-placeholder { color: #9B9B9B; } input::-moz-placeholder { color: #9B9B9B; }
It would be nice to have that color configurable in the GP Customizer\Colors\Forms\Placeholder.
Thanks!
Alex
November 27, 2019 at 3:26 pm #1080494TomLead DeveloperLead DeveloperHi Alex,
I agree, it’s just too bad it requires so much CSS for such a simple thing. Will consider this in 1.10 π
Thanks!
November 28, 2019 at 7:03 am #1081544AlexHi Tom,
I think Gravity didn’t have your philosophy when writing their 3000+ lines formsmain.css π
Section in blocks plug-in -> GP 1.10 with Placeholder color -> GenerateForms alpha! Busy end of year for you Tom π
November 28, 2019 at 9:12 am #1081755TomLead DeveloperLead DeveloperHaha, we’ll have to see about that! π
December 3, 2019 at 8:46 am #1091928AlexYou’re probably aware of this, but since this was new to me I kept reading and I found this article really interesting. I’m not sure what your tool chain is, but AutoPrefixer could help keep your development css clean and automatically append the browser specific stuff at release.
For example this:
textarea::placeholder { color:#ccc; } input::placeholder { color:#ccc; }
Becomes this:
textarea::-webkit-input-placeholder { color:#ccc; } textarea::-moz-placeholder { color:#ccc; } textarea:-ms-input-placeholder { color:#ccc; } textarea::-ms-input-placeholder { color:#ccc; } textarea::placeholder { color:#ccc; } input::-webkit-input-placeholder { color:#ccc; } input::-moz-placeholder { color:#ccc; } input:-ms-input-placeholder { color:#ccc; } input::-ms-input-placeholder { color:#ccc; } input::placeholder { color:#ccc; }
December 3, 2019 at 8:19 pm #1092570TomLead DeveloperLead DeveloperYea, definitely saves some typing time! I’m more concerned with the amount of CSS it generates though – that’s tons of code just to adjust the placeholder color. I’ll definitely see what I can do π
Thanks!
December 4, 2019 at 5:06 am #1092957AlexHi Tom,
Sorry I was so vague. I meant that I didn’t know there were so many rules that require browser specific prefixes. And since it seem to change depending on browser version, it is a lot of work to maintain.
I suggested Autoprefixer as a time saver, because it uses https://caniuse.com/ and automatically handles those up-to-date prefixes for you. For example if you run the GP style.css in it, it will add and remove couple of browser specific prefix. I guess it removes those that have been standardized in newer browser version and adds them on those that are not quite standardized.
Anyway, there’s zero emergency to support Placeholder color, my css snippet does the job. And this might be the only website I ever build.
-
AuthorPosts
- You must be logged in to reply to this topic.