Question

我有一个搜索字段，后台有搜索图标。这是CSS：

    input[type=search] {
    outline: none;
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;

    background: #ededed url('$http://www.$domain/images/search-icon.png') no-repeat right 5px top 5px;
    padding-left: 8px;
    padding-right: 24px;
    border: solid 1px #ccc;
    width: 122px;
    font-size:16px;
     font-family: \"Lato\";
  font-weight: 300;

    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;

    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

input[type=search]:focus {
    width: 230px;
    background-color: #fff;
    border-color: #7486BA;

    -webkit-box-shadow: 0 0 5px #7486BA;
    -moz-box-shadow: 0 0 5px #7486BA;
    box-shadow: 0 0 5px #7486BA;
}
@media screen and (max-width: 800px) {
input[type=search]:focus {
    width: 122px;
}
}

input[type=search]:-moz-placeholder {
    color: #DEDEDE;
}
input[type=search]::-webkit-input-placeholder {
    color: #DEDEDE;
}

这是HTML：

<form id=\"search_form\" method=\"GET\" action=\"$http://www.$domain/\">
<input type=\"search\" id=\"search\" name=\"search\" placeholder=\"$search_placeholder\" class=\"awesomplete\" autocomplete=\"off\">
</form>

表单只能通过按Enter键提交。什么是使搜索图标可点击的最简单方法？

我尝试在搜索图标的顶部制作一个30x30的锚定点，但它运行不正常

可点击的搜索图标在背景中

0 个答案: