CSS搜索表单不起作用答案

【问题标题】：css search form not workingCSS搜索表单不起作用
【发布时间】：2016-03-02 03:48:28
【问题描述】：

所以我将我的网站升级为响应式模板，一切都完成了，但卡在这里！所以我知道这是一件非常简单的事情，就像 a b c 一样，但对于我的生活来说，我无法弄清楚：*（ http://www.example.com/cards/holiday-greeting-cards.php 在右上角带有放大镜图标的搜索按钮...如何使其工作！另一个显示“搜索节日贺卡”的搜索按钮（一旦开始工作就会被删除）工作正常...... 任何人都可以请帮忙吗谢谢你的建议

【问题讨论】：

好吧，另一个搜索字段正在工作，因为它位于具有适当定义的操作和方法属性的 FORM 元素内，以及一个提交按钮。不起作用的输入字段只是一个输入字段，您需要将其包装在一个表单标签中，类似于“假日贺卡”字段
好的，是的，所以将表单放入 div 中是可行的，谢谢 salvenko，但它正在使用“enter”键我如何使它以便点击放大镜图标起作用？
如果您想通过鼠标点击提交表单，您需要在表单内有一个提交按钮。目前，放大镜只是输入字段的背景图像。您可以使用下面 divix 提供的答案中的解决方案，并在放大镜上添加一个不可见的按钮。
哇哦！！！太棒了！！！！！！！1 正是我想要的！谢谢！

标签： css forms search button

【解决方案1】：

如果你在输入框中添加了一个类（你也可以在 search_box 中进行输入查找）

<div class="search_box pull-right">
    <input type="text" class="search_input" placeholder="Search">
</div>

你可以使用jQuery来获取内容（这个例子只对回车键有反应）

$('.search_input')
    .keypress(function(e) {
        if(e.which == 13) { // if you press enter
            window.location.assign('/cards/search-results-xmas.php?keywords=' + $('.search_input').val());
        }
    });

【讨论】：

【解决方案2】：

这个不是完美的解决方案，它更像是一个 hack，但它真的很短并且可以完成它的工作。

在后面添加：<input type="text" placeholder="Search">

<input type="submit" style="
    width: 30px;
    margin-left: -40px;
    opacity: 0;
">

【讨论】：

好的，是的，所以将表单放入 div 中是可行的，谢谢 salvenko，但它正在使用“enter”键我如何使它以便点击放大镜图标起作用？