CSS 文本框里添加按钮的实现

有很多人做界面会经常发现设计师设计出这样的界面：

咋一看是一个文本框里加了一个按钮，经过谷歌之后，未发现在文本框里可以添加按钮。

但可以通过div来实现它。

我的做法是先做一个大小的div，然后用带里面大小的图片作为背景，然后在div中并排依次添加一个文本框、和按钮，要求按钮同时覆盖在查找图片上，

然后设置文本框和按钮的的性质属性为空即可。

我的源码为：

HTML:

<div class="divleft">
       <input type="text" style="width:180px; height:27px; border:1; background:none; float:left;">
        <button type="button" value=" " style="width:30px; height:27px; border:1; background:none; float:right;">
</div>    

CSS:

.divleft
{
    width:227px;
    height:27px;
    float:left;
    border:1px solid #458591;
    background:url(../image/25.png);

}

25.png图片为：

 

然后实现的效果为：

转载于:https://www.cnblogs.com/lanye/p/3338131.html