我正在计划将图像添加到输入字段中，因此如果单击该图像，输入字段中的文本将会清除。
我正在计划使用绝对定位。 我的问题是哪种html标签是这种情况的最佳候选者？
这是我使用的代码。
<DOCTYPE html>
<head>
<title></title>
<style>
#search_form {
width: 380px;
height: 110px;
position: relative;
background: -webkit-gradient(linear, left top, left bottom, from(#43689a), to(#6399e7));
}
#search_form input {
width: 300px;
height: 30px;
border-radius: 18px;
border: 1px solid #ccc;
margin-left: 70px;
margin-top: 40px;
padding-left: 36px;
}
#search_form input:focus {
outline: none;
}
#search_form button {
position: absolute;
width: 16px;
height: 16px;
background: url(f.png) no-repeat 50% 50%;
border: 0;
top: 47px;
left: 85px;
cursor: hand;
text-indent: -9999px;
}
</style>
</head>
<body>
<div id="search_form">
<form>
<input type="text" placeholder="Search....">
<button>Submit</button>
</form>
</div>
</body>
</html>
答案 0 :(得分：0)
在使用<img>标记之外，您可以将图像放在输入字段的背景中。
#search_form input { background:url(../imagepath/image.jpg); }
答案 1 :(得分：0)
<img> 通常，您需要为大多数图像工作使用<img>标记。
<img src="blah.png" />
background-image 您还可以使用普通<div>并在CSS中设置其background-image规则。
<强> HTML
<div class="handsome-bg"></div>
<强> CSS
.handsome-bg {
background-image:url(blah.png);
}
两者都有侧面和下侧，但一般都坚持<img>。 <img>更难以做的事情是根据屏幕尺寸或密度选择不同的图像（我想在视网膜显示器上使用高分辨率图像）。