Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Thomas Hewitt
Thomas Hewitt
17,691 Points

Change placeholder text using CSS

Hi everyone,

I'm working on a site where I'm fixing the display for mobile devices. One issue that I have is that when the search bar is reduced in size, the placeholder text becomes too large for the container and only some of the text is displayed.

Now, I can't touch the HTML of this part of the site (which is a major pain) but I can play with the CSS. One fix I've implemented is by using an attribute selector to simply get the placeholder text to display: none; but that's not really going to cut the mustard in my opinion. I'd rather modify the text so that the only word that is displayed in the placeholder is search.

I can't link to the site or anything but I've included a snippet of the problem here:

<input type="text" id="searchBanner" name="searchTerm" placeholder="Search for products here" autocomplete="off">

@media (max-width: 400px) { #searchBanner[placeholder] { display: none; } }

If anyone knows of a way to change the placeholder text with CSS I'd be very grateful.

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

You might also consider using the vw or viewport width unit to change the size of your text. It takes a bit of experimentation to work if you haven't used it before but it works better as it's a scalable length unit.

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Hi Thomas,

Have you tried using the "font-size" instead? I think you can change the size of the input box itself when you reach the 400px width.

Hope this help.