例一效果：

 取消

例一代码演示：

<form class="yo-search"> <label class="operation"> <span class="yo-ico">&#xf067;</span> <input type="text" class="input input-shrink" placeholder="输入搜索关键字..." /> </label> <span class="cancel">取消</span> </form>

例二效果（input聚焦时不收缩）：



例二代码演示：

<form class="yo-search"> <label class="operation"> <span class="yo-ico">&#xf067;</span> <input type="text" class="input" placeholder="输入搜索关键字..." /> </label> </form>

只需移除[input-shrink]类名

<input class="input input-shrink" ... /> ↓↓↓ <input class="input" ... />

例三效果（搜索按钮的搜索）：

 搜索

例三代码演示：

<form class="yo-search"> <label class="operation"> <span class="yo-ico">&#xf067;</span> <input type="text" class="input" placeholder="输入搜索关键字..." /> </label> <span class="button">搜索</span> <!-- 增加这行即可 --> </form>

例四效果（搜索框无ico）：



例四代码演示：

<form class="yo-search"> <label class="operation"> <input type="text" class="input" placeholder="输入搜索关键字..." /> </label> <span class="button yo-ico">&#xf067;</span> </form>