Label text appears as watermark in form input (HTC EVO)

Question

I am having an issue with the content of a label being automatically inserted as a watermark inside an input. I have tested this on a range of phones and browsers but it seems to only happen on the HTC EVO (3D X515A). When I give it focus (e.g. touch the input) the text disappears, similar to the placeholder attribute of an input. There is also no auto-population with js.

I have tried searching to see if this is a new standard on Android browsers but have come up with only one reference to the issue which was closed over a year ago with no solution: https://github.com/jquery/jquery-mobile/issues/382

Here is the label and input code:

<input type="number" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />
<label for="phone">Confirm your Valid Cell Number:</label>

I will have to take a picture of the phone's display if anyone needs to see the issue because it does not happen on my emulator.

---

UPDATE: Removing the input identifier on the label (for="phone") solves the problem, but is not syntactically correct. Seems to be a weird bug, or "feature" on HTC browsers.

I ran into another big problem with the HTC browser. When you autofocus on an input the browser will apply its own style regardless of your css. It removes the border and background color and the input looks empty and almost invisible (if not for the blinking cursor). Using the :focus pseudo-class and other -webkit selectors don't work to override the browser's styles. There's another question on here describing this issue with no clear answers. Closest I can get to a workaround is removing the style from the input and wrapping it in a div.

Answer 1

I fixed this by adding line breaks before the text in my label like so:

<label for="phone">



Confirm your Valid Cell Number:</label>
<input type="number" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />

The browser is actually rendering the text (including whitespace) from the label in the input. What a bizarre/stupid bug!