Changing foreground of placeholder text

Anvil Q&A
1

I know there’s already a forum for it but I am still unable to change the foreground color of my Text box placeholder. Since I have black background, the placeholder isn’t visible. Pleas help.

2

You can use a work around to deal with this in the mean time - a bit of a hack job but it should get you what you need…

def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    
    # Create some place holder text
    self.text_box_1.text = "Place holder"
    
    # Create a variable to check if this is being done in the init
    self.first_time = True

  def text_box_1_focus(self, **event_args):
    """This method is called when the TextBox gets focus"""
    # Now clear the text box if it is the first time being clicked on
    if self.first_time:
      self.first_time = False
      self.text_box_1.text = None

https://anvil.works/build#clone:YQ63SCQCYY7IING3=GUVSBLPBG6J7JXEUG6A4OT25

There are a lot of cleaner ways to do this I am sure but this will get you going.
Alternatively you could add a link and programmatically hide the link and show the text box when a user clicks on it. That would be a much cleaner solution.

EDIT:
You could also add a lost focus event to check if the text box text is None and show the “place holder text again”

3

Those are all good ideas. Thanks for the help

4

you can also add


input.anvil-component::placeholder {
  color: white;
}

to your theme.css

3 Likes
5

That seems like a good idea. I’ll try that

6

@stucork - aka CSS guru - for the win!!
I almost put money on the fact that you would have a solution

2 Likes
7

Indeed. Everywhere I go on the forum, I see @stucork finally coming up with the answer

1 Like