Question

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

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>

你可以帮助我在搜索栏中使用“图标字体”仅使用CSS来打开搜索栏吗？

1 个答案: