删除标签文本而不删除标签内的文本框

Question

我有：

我有一个带有用户名和密码文本框字段的登录表单。这些字段包含在标签中。

我需要的：

我需要删除标签的文本，因为我想改为应用占位符值。

我的代码：

注意：我已经设法定位到中断，但无法定位到标签的渲染文本。

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>

我需要一个基于 CSS 的解决方案。无法编辑标记。

Answer 1

将此属性添加到特定标签 class

label {
   color: transparent;
}

或为特定标签创建 class 并将此 class 添加到标签

.txtlbl label{
    color: transparent;
}

Answer 2

我已经按照你上面说的给出了解决方案....

我做的是：

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.

希望对您有所帮助。

所以你的代码将是这样的：

<!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>

Answer 3

至于你不能编辑标记的情况，你可以做的只是给输入 a
margin-left -85px;
这样它就覆盖了标签标签所在的位置没有 space。

Answer 4

另一个想法...您可以将输入字段置于标签之上。这将缓解潜在的可访问性问题，例如可发现性、屏幕 reader "focus"，以及在使用 screen-reader 或切换设备时将标签文本移出屏幕可能导致的滚动。

[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
}

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

删除标签文本而不删除标签内的文本框

Remove label text without removing text box within label

html

css

forms

label

css-selectors

我有：

我需要的：

我的代码：