html - 你能帮我在搜索栏中使用 "icon font"仅使用 CSS 来打开搜索栏吗？

Question

我一直在尝试获取一个搜索图标来打开一个搜索栏。我非常接近，但是当您单击搜索图标时，搜索输入不会打开。当您单击图标右侧时，它会打开。有没有办法让这项工作没有背景图片？我希望能够使用图标字体。

在这里查看:http://cdpn.io/mkAyi

Answer 1

<input id="searchbox" class="t-box2" type="text" value="Search" name="text">

<style>
    .t-box2 {
    background-color: #FFFFFF;
    background-image: url("../images/search_icon.png");
    background-position: 96% center;
    background-repeat: no-repeat;
    border: 1px solid #DFDFDF;
    border-radius: 10px 10px 10px 10px;
    color: #666666;
    float: right;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    height: 21px;
    margin-top: 4px;
    padding: 2px 35px 2px 7px;
    text-align: left;
    width: 1px;
}
.t-box2:hover {
     width: 100px;
}
</style>