使用HTML + CSS显示输入范围 [英] Display span over input with HTML+CSS
本文介绍了使用HTML + CSS显示输入范围的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想用CSS在输入元素上显示一个span元素。我怎样才能做到这一点。我当前的代码:
<输入类型= url占位符=例如www.google.com />
< span> http://< / span>
如何在输入元素上显示span元素,以便用户知道不需要输入http://,这样看起来就好像已经有一个值了,但是那是输入中的span元素吗?我认为我可以通过CSS定位来做到这一点。
我不能使用占位符,因为我不想将其删除。
.wrapper {位置:相对;}输入{padding-left:48px;}。wrapper span {位置:绝对;左:2px;}
< div class = wrapper > <输入type = url占位符=例如www.google.com /> < span> http://< / span> < / div>
$ p
$ b
I want to display a span element over an input element with CSS. How can I do this. My current code:
<input type="url" placeholder="e.g. www.google.com" />
<span>http://</span>
How can I display the span element on the input element so that the users know there is no need to enter http:// so it would look like if there's already a value in but then it is the span element on the input? I assume I can do that with CSS positioning.
I cannot use placeholder as I don't want it to be removed.
解决方案
As you have mentioned you need to use positioning and wrap your input with span into div or some other element.
.wrapper {
position: relative;
}
input {
padding-left: 48px;
}
.wrapper span {
position: absolute;
left: 2px;
}
<div class="wrapper">
<input type="url" placeholder="e.g. www.google.com" />
<span>http://</span>
</div>
这篇关于使用HTML + CSS显示输入范围的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文