html - 您能帮我在搜索栏中使用“图标字体”，仅使用 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>