html之在文本字段中放置图像

arxive 阅读:1520 2023-11-05 18:46:41 评论:0

我有一个这样的 HTML 输入字段。我想在右侧的文本框中放置一个图像。有人可以帮我解决它的 CSS 问题吗?

<input type="text" id="name"/> 

图中是文本字段电子邮件地址内的图像,这就是我想要的。你是怎么做到的?

请您参考如下方法:

HTML

<div class="fake-input"> 
    <input type="text" /> 
    <img src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=25 /> 
</div> 

CSS

.fake-input { position: relative; width:240px; } 
.fake-input input { border:none; background-color:#fff; display:block; width: 100%; box-sizing: border-box } 
.fake-input img { position: absolute; top: 2px; right: 5px } 

工作演示

http://jsfiddle.net/HnJZa/


标签:程序员
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

全民解析

全民解析

关注我们