css - CSS在末尾用图标填充宽度（搜索框）

Question

我正在尝试这样做：

（搜索按钮的大小是固定的，左侧占屏幕的剩余宽度）。

我得到的最好的：jsFiddle

HTML：

<input>
<img src="http://ii.alatest.com/css/iphone/search_icon.gif">

CSS：

input {
    height: 100px;
    font-size: 3em;
    width: 100%;
    float:left;
}

img {
    float:right;
    width:100px;
    height:100px;
}    

编辑：我忘了提，搜索图标必须是可点击的！这可能会导致一个解决方案，它是一个单独的元素，而不是背景的一部分。

Answer 1

我建议使用图像作为输入的背景，例如这个jsFiddle 示例。

input {
    height: 100px;
    font-size: 3em;
    width: 100%;
    float:left;
    padding-right:120px;
    background-image: url(http://ii.alatest.com/css/iphone/search_icon.gif);
    background-position: 98% 50%;
    background-repeat: no-repeat;
}

或者，您可以将两个元素都向左浮动并在输入上设置宽度，例如 jsFiddle 示例。

input {
    height: 100px;
    font-size: 3em;
    width: 70%;
    float:left;
}

img {
    float:left;
    width:100px;
    height:100px;
}