Question

<div data-role=page">
    <form method="post">
        <input name="search" id="search" value="" placeholder="Buscar" type="search" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Buscar'">
    </form>
</div>

我正在使用jquery手机1.4.2当我们点击它时，如何使搜索图标可点击（如输入）它应该像一个输入按钮。我怎样才能改变它的边框颜色？

Answer 1

我在这里设置边框请看这个。

<div data-role=page">
<form method="post">
<input style='border:1px solid red;' name="search" id="search" value=""  placeholder="Buscar" type="search" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Buscar'">
</form>
</div>

看看这个帖子

http://forum.jquery.com/topic/anyone-have-a-way-to-bind-to-clicks-of-the-magnifying-glass-on-the-search-box

Answer 2

jQuery Mobile中的搜索图标在pseudo：after元素中实现。这意味着就jQuery / JavaScript而言，它不是DOM的一部分，你不能将事件附加到它。

作为一种变通方法，您可以在图标顶部插入一个不可见的DOM元素（例如SPAN），并向该元素添加一个click事件：

<form method="post">
    <input name="search" id="search" value="" placeholder="Buscar" type="search" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Buscar'" />
</form>

所以给定上面的标记，下面的代码将插入一个SPAN并添加一个click事件处理程序：

var s = '<span class="fakeSearchButton"></span>';
$("#search").parents(".ui-input-search").append(s);

$(document).on("click", ".fakeSearchButton", function(){
    alert("search icon click");
});

然后放置SPAN正确添加此CSS：

.fakeSearchButton{
    position: absolute;
    display: block;
    height: 14px;
    left: 0.3215em;
    top: 50%;
    margin-top: -7px;
    width: 14px;
    z-index: 200;
}

<强> DEMO

要更改搜索输入的边框颜色和插入阴影，请使用以下CSS：

.ui-input-search {
  border-color: #7FAF1B !important;
  -webkit-box-shadow:rgb(217,255,169) 0px 1px 2px 0px inset;
  box-shadow:rgb(217,255,169) 0px 1px 2px 0px inset;
}

<强> DEMO

如何使搜索图标可点击？

2 个答案: