[code]
input:focus::placeholder { color: transparent; margin-bottom: 0px; } input { vertical-align:bottom; } [/code]<input type="text" size="25" name="URL" style="height:45px; width:600px; font-size:14pt; color:#4c659b;" placeholder="Your email goes here.">Is it possible to change color in the placeholder text to make certain words one color and other words a different color? I can’t seem a way to figure it out.
Thank you.
No its not possible I’m afraid. You can’t do that to the normal input text either.
You would need to use a script and perhaps overlay a standard html element (label perhaps) instead of a placeholder and create placeholder functionality in script. Of course that would need to be done in an accessible way.
You can do something like this in css only for modern browsers but does rely on the required attribute.
Generally with forms its safer to leave the default behaviours alone as accessibility is uusually baked in place from the start.
If you are using a placeholder only then remember it is no substitute for a label and inputs should 99% of the time have an associated label. My demo above uses a label which is never hidden so is still accessible.
Very cool!!
Thank you.
Please explain why inputs in forms should always have a label. I used forms many times without a label DOM element.
Labels are important for accessibility. See https://webaim.org/techniques/forms/ for more details.
Aside from the many accessibility issued in TechnoBears post there is also a usability error in not providing a label.
Take a look at this screenshot of a completed form that is just about to be submitted and tell me what’s wrong with it?
Can you see the problem?
No, neither can I.
The problem is that the first field should have been your spouses name not your own 
No form validation technique would have ever picked that up and as the placeholder is gone you have no idea what field is correct when you review the form before submitting.
The problem is also compounded by the browser’s autofill and numerous times I have accepted autofill and it has put the wrong fields in the wrong input but as the placeholder was gone I had no idea it was wrong.
It has also been proved numerous times that forms with labels above the input and stacked vertically are filled in quicker and more correctly every time.
I ran into that exact problem the other day. I had completed the first couple of fields of a form, and tabbed to the next one, whereupon the placeholder text disappeared. At that point, I was called away, and when I returned a few minutes later, I had no idea what was meant to go in the box.
I have seen and even written forms like
Email: <input ...
where the “label” is text and not in a tag.
But now I prefer using label tags primarily because they increase the click / tap target to bring focus to the input…
It seems somewhat frequent of late that some think of a placeholder as a label substitute. I’m guessing this is desired as a way to reduce what takes up what could be valuable screen real estate for mobile devices.
However, sacrificing usability seems like a poor decision to me.
can we use font color tag for changing the color? I think so that is quite easy way for changing the font colors.
Are you referring to this?
<font color="#0000FF">This text is blue,/font>
Font tags have long been deprecated and should not be used.
No not in this century!
The font tag is deprecated and should not be used as there are more semantic tags that can be used.
It is of no help in this post anyway because you can’t put tags inside a placeholder attribute.
I use <p> elements and not <label>. Why is <label> preferable?
If you go at google.com, you will see a search form. And the input does not have a <label> element. DOes that mean that google is not supporting a certain scnario like disabled people with a special browser setting to show labels in big like the alt for <img>?
By the way, I was surprised that google.com has so many divs in the form. Does anyone understand why one would want to have so many divs?
I believe that was explained in the article I linked to above.
Important
Screen reader users generally navigate through a form using the Tab key to jump from form control to form control. Associated form labels are read for each form control when the user navigates to them. Any non-label text content between the form controls is usually skipped over. Be sure to include important cues or instructions in associated labels or at the beginning of the form.
AH OK thanks for the clarification.
Once I met one person that was a programmer blind of sight. He had a speaker to read the text. The label would definitely be caught by the tab navigation in a good way.
In rare cases you can omit the label element when as in the case of the google page the intention is obvious. Google is a search page. It has one input on the page with a big button underneath that says ‘Search’. The title of the input also says search.
I believe that users would be able to deduce what needs to be done whatever method they are using to view the page.
However it would have done no harm to simply add a label saying “Enter your search term below”.
Just because large organisations don’t always follow the correct procedure it doesn’t mean you should do the same.
I have seen a few of the “big names” on the web using really shoddy html with table layouts, validation errors and all-sorts.
Maybe they are just too big to care about stuff like that, while they are making gargantuan profits anyway.
It doesn’t set a good example.
I think it is linked to politics. The guy that sits on the front-end at google must make the page complex for his own interest. That would explain why there are so many divs and classes.
Have you considered making use of javascript? More precisely make use of jquery and selecting the first index of the content then applying the relevant CSS changes to the character of interest?
Ideally, break the string into an array then make the relevant changes to index of interest
How to envisage applying styles to the letters in the placeholder attribute?
No tags are allowed inside the placeholder attribute (or any attribute) even with JS.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.