html - 用 dojo/html/css 实现搜索栏/按钮？

Question

我正在尝试将我的搜索栏设计为更现代的外观。目前我的搜索看起来像：

我使用以下 HTML 得到：

            <div id="search">
            <input type="text" id="parcel" size="30" value="Enter Parcel ID or Address"/>
            <button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ doFind();}'>Search</button>
        </div>

和 CSS：

            #search {
            position:relative;
            top:2px !important;
            right: 95px;
            color:white !important;
            font-family:Goudy Old Style Italics;
            font-weight:bold;
            font-size:11pt;
        }

我想将搜索栏修改为如下图所示，这样当用户点击图标时，就会执行搜索。我已经尝试实施在谷歌上找到的一些解决方案，但我认为我的 CSS 有一些东西正在踩踏。有任何想法吗？

Answer 1

您可以允许现代浏览器使用 input type="search" 处理搜索输入的呈现。

示例和教程：
http :
//www.wufoo.com/html5/types/5-search.html http://diveintohtml5.info/forms.html#type-search

W3C 规范： http ://www.w3.org/TR/html-markup/input.search.html