HTML代码如下：
<div class="search">
<input type="text" class="s-input" value="输入话题/QQ/昵称..." id="sInput" />
<a href="#" target="_blank" class="s_icon"></a>
</div>
CSS代码如下：
.search{
width:225px;
height:24px;
border-radius: 4px;
background-color:#81AAC6;
padding-left:5px;
}
.s-input{
background: none;
border:0 none;
color:#fff;
width:190px;
height:18px;
padding:4px 0 2px;
vertical-align: top;
outline: none;
}
.s_icon{
background:url(img/icons.png) no-repeat -53px 2px;
width:20px;
height:24px;
display: inline-block;
}
显示结果：
注：
1、这里outline: none;的作用体现在此处光标为字体的颜色
如果不加outline的属性，则显示为：此处input有外边框，并且光标不为白色的。
2、a.s_icon为inline元素，所以它的宽高是由文本撑出来的，即使给它设置宽高也没作用。既然它这里没有文本内容，所以只能设置为inline-block属性，这样既能显示出设置的宽高，也能与input内联元素同行。