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.

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

```html
<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: 
i have tried to give a solution according what you said above....

What i did is:

> 
> I have shifted the label text (with **TEXT-INDENT** property) and removed extra spances around **"P"** tag so that text will not appear and space
>  also will not be there, you can only see the textbox as you wanted.
> 
> 
> 

Hope this helps you.

so your code will be like this:

```html
<!DOCTYPE html>
<html>
    <head>
     <title></title>
     <style type="text/css">
      label[for=user_login] > br,
      label[for=user_pass] > br {
       display: none;
      }
      label {
       text-indent: 9999px;
       width: 100%;
       display: block;
       overflow: hidden;
      }
      p {
       margin: 0;
       padding: 0;
      }
     </style>
    </head>
    <body>
     <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>
    </body>
</html>
```
Another idea...You could have the input field lay overtop of the label. This will mitigate potential accessibility issues such as discoverability, screen reader "focus", and possible scrolling caused by moving the label text offscreen when using a screen-reader or switch device.

```css
[for^=user_] > br {
  display: none;
}
[for^=user_] {
  position: relative;
}
input[id^=user_] {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0; //solve for Safari showing a bit of text due to 2px default margin
}
```

```html
<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>
```