How can I change an input placeholder text using CSS

Question

I am using wordpress and I am trying to change the content of an input placeholder content using CSS. I was able to do it in the desktop version by doing this.

.st-location-new:before {
    content: 'Routes';
    visibility:visible;
}

<label class="st-location-new">Where are you going</label>

In the mobile version I can't get to change the placeholder text by applying the same method but without any success. I was able to change the color and size of the font but not the content.

<input type="text" name="location_name" class="form-control" readonly="" placeholder="Where are you going?" id="dropdown-mobile-destination" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="">

Chrome doesn't support it anymore. You need to use HTML or JS instead. — demkovych
– demkovych, Commented Jan 27, 2020 at 14:51

kaizen · Accepted Answer · 2020-01-27 15:04:40Z

1

Try this JavaScript code and delete the label statement

document.getElementsByName('location_name')[0].placeholder='Routes';

answered Jan 27, 2020 at 15:04

kaizen

1,2101 gold badge17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I change an input placeholder text using CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related