处理新产品的订购表,其中一列是指定产品的RAL颜色。
我想有固定的文字,用户不能删除,所以他们所要做的就是输入一个四位数后,这涉及到RAL颜色。
我遇到的问题是输入是经过固定的文本,而不是在它之后-见下文。
请忽略table的设计,因为我现在正在研究它的功能,它看起来有点垃圾。
HTML:
<td class="lst-input-ral-box">
<input value="" id="ral" maxlength="4" autofocus="autofocus">
<span class="ral-placeholder">RAL</span>
</td>
CSS:
.lst-input-ral-box {
position: relative;
}
.input {
display: block;
border: 1px solid #d7d6d6;
background: #fff;
padding: 10px 10px 10px 20px;
width: 195px;
}
.ral-placeholder {
position: absolute;
display: block;
left: 5px;
top: 3px;
z-index: 9;
}
任何帮助,这将是非常感谢,因为我是相当新的'复杂'编码。
2条答案
按热度按时间8aqjt8rx1#
不要把静态文本放在输入的里面,而要放在输入的前面。您可以通过删除边框/轮廓等来将其样式设置为“显示”在输入内容内。然后将其添加到包含元素。例如:
**编辑:**为了完整起见,可以通过将
<span>
更改为<label>
来进一步改进,这将在激活时聚焦<input>
。我还减少了两个包含元素之间的“间隙”,因此完整的可单击区域 * 应该 * 激活<input>
:请注意,
<input>
的<label>
具有重要的语义含义。这里应该考虑可访问性,因为不是所有用户都能直观地观察或关心这种风格的放置。这个元素是否“标记”了输入?从语义上说,这是你的决定。
aria-
属性和其他功能的组合也可以用于实现合理的设计,同时保持标记语义清晰。41zrol4v2#
如果我已经很好地理解了,你想在“RAL”常量后添加4位数字,对吗?
是这样的话,你应该换掉
其中:
PS:你必须知道,
name
属性是一个很好的实践,可以在for=""
from<label>
标签中正确使用,即使id
也可以工作。