Input Field CSS?


#1

Hi Everyone,

I am trying to make the labels on my form white instead of grey. Anyone know the CSS for this? http://unbouncepages.com/stefanoisawesome/

Bonus Points
If you know how I can style the “Let’s Work On” field - to have no background and a 1px white border box

Thanks!


#2

Hey Trevor!

Wow, there are so many things I love about this post! Does our Unbounce Expert @Stefano have anything to do with that URL or is that a big coincidence?

I’m not a coding wizard, sadly. But @Noah, @Rob and @Hristian are! :star2:

If one of them has a moment, perhaps they’ll be able to provide a quick tip. If there’s no action on this thread by the end of the day I’ll do some more digging!


#3

haha spot on, @Jess! @Stefano showed me this awesome form styling. Still trying to figure out how to change the color of the text. I would love to launch this new landing page I am working on with this styling,


#4

Hey Trevor!

I can’t take credit for this, this was all @Rob’s doing, but here’s a script that’ll make the placeholders on your form white instead of grey:

<style>
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: white;
}
::-moz-placeholder { /* Firefox 19+ */
  color: white;
}
:-ms-input-placeholder { /* IE 10+ */
  color: white;
}
:-moz-placeholder { /* Firefox 18- */
  color: white;
}
</style>

Plug that into your stylesheet and let me know if you get the desired outcome! If it works, I’ll give @Rob a crisp high five for you!


#5

Yes! Thank you @Jess & @Rob :smiley:


#6

Hi Trevor!

I’m so glad I came across this thread! How did you make the form fields to be transparent and the borders to be only at the bottom of each form field? This is the same styling that I’m trying to execute for one of my clients too.