将图标放在输入元素中的形式（不是背景图片！） [英] Put icon inside input element in a form (not as background image!)

问题描述

我想要完成这里提出的要求：

I want to do exactly what was asked here:

在表单中的输入元素内放置图标

除了我想要的图标是右对齐。

Except that I want the icons to be right-aligned.

后台解决方法将无法正常工作，因为这些图片必须可点击！

The "background" workaround won't work, since those images have to be clickable! So it must be an IMG.

推荐答案

没有背景图片的解决方案：

A solution without background-images:

JSFiddle。

HTML

<div id="input_container">
    <input type="text" id="input" value>
    <img src="URL" id="input_img">
</div>

CSS

#input_container { position:relative; padding:0; margin:0; }
#input { height:20px; margin:0; padding-left: 30px; }

#input_img { position:absolute; bottom:8px; left:10px; width:10px; height:10px; }

这篇关于将图标放在输入元素中的形式（不是背景图片！）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！