Placeholder text styling – transparency

Resolved billseymour
(@billseymour)

12 years, 8 months ago

Mike- First – thanks for the efforts made resulting in this update. Much appreciated.

My Q: I see that Placeholder text seems to have reduced transparency (at first I thought it was a gray, but when I changed color to red, the red was also reduced transparency).

I would like to have styling control over how Placeholder text is handled, but I could not (via Firebug) identify where the Transparency styling was being made.

Could you please either point me to where I might restore full transparency to Placeholder text, or possibly I might suggest that you include a Style option in ‘Style’ tab of the plugin for Placeholder text. Thanks.

http://ww.wp.xz.cn/plugins/si-contact-form/

Viewing 4 replies - 1 through 4 (of 4 total)

Mike Challis
(@mikechallis)

12 years, 8 months ago

Thanks for the suggestion. I will consider it for future updates.

Unfortunately, since browsers handle this in non standard ways, there is no one simple style setting, there is a different one for each browser type.
View the HTML source and you will see the style.
Thread Starter billseymour
(@billseymour)

12 years, 8 months ago
@Mike-

I did a little digging, and here is the answer:

ref to comment answer: http://css-tricks.com/snippets/css/style-placeholder-text/#comment-267934 – the commenter, Thibaut, says:
```
Firefox 19 lowers the opacity of the placeholder to 0.54 by default.
To get the correct color you need to reset it:
::-moz-placeholder { opacity: 1; color: red; }
```
I am using Firefox, and with this Opacity:1 style I get fully transparent color. Hopefully this will be of help if anyone else runs into the same situation. –Bill
Mike Challis
(@mikechallis)

12 years, 8 months ago

Can you send me a link to your form so I can see exactly how you changed the style?

http://www.fastsecurecontactform.com/contact
Thread Starter billseymour
(@billseymour)

12 years, 8 months ago
@Mike- Sure, happy to do so.

I did ‘belt and suspenders’ in my Css, setting opacity:1 for all the vendor prefixes (probably unnecessary), and using the single-colon for pre-FF19. I also found it useful to put the color in this area, too:
```
::-webkit-input-placeholder { opacity: 1; color: #333333; } /* gray80 */
:-moz-placeholder           { opacity: 1; color: #333333; } /* Firefox 18- (one color)*/
::-moz-placeholder          { opacity: 1; color: #333333; } /* Firefox 19+ (double colons) */
:-ms-input-placeholder      { opacity: 1; color: #333333; }
```
Site link using this Css:
http://www.creativeretro.com/contact-me

Hope that is of some help.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Placeholder text styling – transparency’ is closed to new replies.

Tags