你并不需要的div元素,你可以指定一个背景输入直。
编辑:这是工作代码。我对它进行了测试,但您必须根据自己的需求进行调整。据我所知,这里的一切都是必需的。
input {
background: #FFF url(test.png) no-repeat bottom right;
width: 120px;
height: 20px;
line-height:20px;
padding:0;
text-indent:3px;
margin:0;
border: none;
overflow:hidden;
}
EDIT2:我不明白为什么我得到downvoted,但这种方法应该工作,除非你需要比输入元素本身更大的图像。在这种情况下,你应该使用额外的div元素。但是,如果图像与输入大小相同,则不需要额外的标记。
编辑3:好吧,在bobince指出问题后,我正在接近一点。这将在IE6 & 7中工作,它在FF中很接近,但我仍然在努力。
input {
background: #FFF url(test.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 120px;
height: 20px;
line-height:20px;
padding:0px;
text-indent:3px;
margin:0;
border: none;
}
body>input {
background-position:13px 16px;
}
Edit4:好吧,我想我明白了这个时间,但它需要使用CSS3选择器,所以它不会验证为CSS 2.1。
input {
background: #FFF url(test.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 120px;
height: 20px;
line-height:20px;
padding:0px;
text-indent:3px;
margin:0;
border: none;
}
body>input {
background-position:13px 16px;
}
body>input:enabled {
background-position:9px 10px;
}
体>输入将目标除了IE6,身体>输入一切:启用将定位不是用于所有的浏览器除了IE 6,7,8,&然而停用,因为任何形式的元素:启用是一个CSS3选择器,它不验证为CSS2.1。我无法找到一个合适的CSS2选择器,它允许我将IE7从其他浏览器中分离出来。如果不验证(但直到验证器切换到CSS3)对您来说是个问题,那么我认为您唯一的选择是额外的div元素。