Question

我正在尝试使用表单元素在搜索框中添加搜索图像。

我的代码是

<div class="col-xs-9">
    <form action="search">
        <input class="form-control" type="search" />
        <span class="glyphicon glyphicon-search"></span>
        <button type="submit" class="btn"><i class="glyphicon glyphicon-search"></i>
        </button>
    </form>
</div>

我想当用户点击搜索框内的搜索图片时，表单操作应该调用代码是http://jsfiddle.net/chetfarley/WK3Q6/1/

尝试https://stackoverflow.com/a/19918345/876739

中的代码

Answer 1

你可以这样做：

HTML：

<div class="col-xs-9">
  <input class="form-control" type="search" />
  <button type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>

CSS：

.form-control + button  {
    position: absolute;
    right: 20px;
    top: 7px;
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

还有一个小事件监听器，如果您只是想要提交表单，则不需要这样做：

document.getElementsByTagName("button")[0].addEventListener("click", function(){
    alert("doing");
});

以下是演示：http://jsfiddle.net/WK3Q6/275/

搜索图标与输入框内的表单元素

1 个答案: