文本框，例如Jquery Mobile中的搜索欄

Question

有什么辦法可以創建文本輸入，就像Jquery Mobile的搜索欄一樣。 例如，當我們鍵入文本時，應該有一個叉號，允許用戶清除該字段。

即使我使用搜索欄作為輸入字段，也會顯示一個搜索圖標，它看起來不太好，不適合文本框。

有人可以幫我嗎。 提前致謝

Answer 1

將data-clear-btn =“ true”添加到您的輸入文本框

Answer 2

我認為這就是您要尋找的。其想法是將圖標隱藏在搜索輸入中。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <style>
    .content .ui-icon-searchfield::after{
        display:none !important;
    }

    .content .ui-input-search{
        padding:0 10px !important;
    }

    </style>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content" class="content">   
        <input type="search" name="search" id="searc-basic" value="" />     
    </div><!-- /content -->
</div><!-- /page -->

</body>
</html>

此處的演示-http: //jsfiddle.net/8sg6M/

文本框，例如Jquery Mobile中的搜索欄

問題描述

2 個解決方案

解決方案1
3 2013-06-30 11:31:26

解決方案2
3 已采納 2012-02-01 10:43:54

文本框，例如Jquery Mobile中的搜索欄

問題描述

2 個解決方案

解決方案1 3 2013-06-30 11:31:26

解決方案2 3 已采納 2012-02-01 10:43:54

解決方案1
3 2013-06-30 11:31:26

解決方案2
3 已采納 2012-02-01 10:43:54