【问题标题】：Remove label text without removing text box within label删除标签文本而不删除标签内的文本框
【发布时间】：2023-09-08 16:00:01
【问题描述】：

我有什么：

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

我需要什么：

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

我的代码：

注意：我已设法定位中断，但无法定位标签的呈现文本。

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 的解决方案。编辑标记不是一种选择。

【问题讨论】：

标签： html css forms css-selectors label

【解决方案1】：

另一个想法...您可以让输入字段位于标签之上。这将缓解潜在的可访问性问题，例如可发现性、屏幕阅读器“焦点”以及在使用屏幕阅读器或切换设备时将标签文本移出屏幕可能导致的滚动。

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

【讨论】：

感谢这个替代概念。您使用的向上箭头的名称是什么？我想知道选择器的术语，以研究哪些浏览器支持它。
表示任何以开头的东西。您可以将 $= 用于以等结尾的任何内容。
这是一篇关于不同属性选择器的优秀 CSS 技巧文章：css-tricks.com/attribute-selectors
它在旧版浏览器上得到很好的支持：w3schools.com/cssref/sel_attr_begin.asp。我会在一个小时左右试用实施。
对查询选择器的支持非常好。 IE 7 和 8 识别 [attr^=val]、[attr$=val] 和 [attr*=val]。 IE9+ 和所有其他浏览器都有完整的查询支持。 caniuse.com/#feat=css-sel3

【解决方案2】：

至于您无法编辑标记的情况，您可以做的只是输入一个
margin-left -85px;
这样它就会覆盖标签并且标签所在的位置没有空格.

【讨论】：

【解决方案3】：

我已经尝试根据你上面所说的给出一个解决方案......

我做的是：

我已经移动了标签文本（带有 TEXT-INDENT 属性）并删除了 "P" 标签周围的多余空格，这样文本就不会出现和空格也不会在那里，你只能看到你想要的文本框。

希望对你有所帮助。

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

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

【讨论】：

这是一种更通用的解决方案，它单方面适用于所有领域，而不依赖于像素计数。感谢您的解决方法。
@ClarusDignus 谢谢... :) 不客气

【解决方案4】：

在特定标签类上添加此属性

label {
   color: transparent;
}

或者为特定标签创建类并在标签上添加这个类

.txtlbl label{
    color: transparent;
}

【讨论】：

文本占用的空间是什么？您的解决方案隐藏了字符而不是空间。肯定有一个 CSS 选择器可以完全删除文本。
标签{ 颜色：透明；左边距：-69px；位置：相对； }
如果我为每个字段的标签文本计算文本的像素宽度，但感觉有点骇人听闻，它就可以工作。我希望有一个选择器，可以让我将文本值设置为 none，但取而代之的是，您的解决方案似乎是向前迈出的唯一一步。感谢您的宝贵时间。
因为您在一个标签类中同时使用标签和输入，所以需要将两者分开。 :)