我拥有的：

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

在特定标签类

上添加此属性

label {
   color: transparent;
}

或者为特定标签创建类，并在标签

上添加此类

.txtlbl label{
    color: transparent;
}

Answer 2

我试图按照你上面所说的解决方案....

我做的是：

我已经移动了标签文字（带有 TEXT-INDENT 属性）并删除了＆＃34; P＆＃34; 标记周围的额外spance，以便不会出现文字和空间也不会在那里，你只能看到你想要的文本框。

希望这会对你有所帮助。

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

＆＃13;

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

＆＃13;

Answer 3

另一个想法......你可以让输入字段位于标签的上方。这将减轻潜在的可访问性问题，例如可发现性，屏幕阅读器＆＃34;焦点＆＃34;以及在使用屏幕阅读器或开关设备时将标签文本移出屏幕可能导致的滚动。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

至于你无法编辑标记的情况，你可以做的只是输入一个margin-left -85px;
所以它覆盖标签，没有空间标签在哪里。

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

我拥有的：

我需要什么：

我的代码：

4 个答案: