Remove label text without removing text box within label

Question

What I have:

I have a login form with username and password text box fields. The fields are wrapped in labels.

What I need:

I need to remove the text of the labels because I want to apply placeholder values instead.

My code:

Note: I've managed to target the breaks but can't target the rendered text of the labels.

label[for=user_login] > br,
label[for=user_pass] > br {
  display: none;
}

<p>
  <label for="user_login">Username
    <br>
    <input type="text" name="log" id="user_login" class="input" value="" size="20">
  </label>
</p>
<p>
  <label for="user_pass">Password
    <br>
    <input type="password" name="pwd" id="user_pass" class="input" value="" size="20">
  </label>
</p>

I require a CSS-based solution. Editing the mark-up is not an option.

Answer 1

Add this property on particular label class

label {
   color: transparent;
}

Or create class for specific label and add this class on label

.txtlbl label{
    color: transparent;
}