标签搜索按钮 - Label into search button?

Label into search button?

本文关键字：按钮搜索标签 | 更新日期: 2023-09-27

我想让标签像一个按钮一样当你点击它时，它会搜索你在搜索框中输入的内容但我以前没有使用

<input type="submit" id='submit' value="search" >

但它看起来很丑…有没有什么方法可以让标签像按钮一样使用呢?

html:

<form action="/search.php" method="GET"> 
<input type="text" id="term" name="term">  
<label id="ca" for="search">Search</label>
</form>

css:

div.search_bar input {
    background: transparent;
    background: rgba(0, 0, 0, 0.15);
    background-clip: padding-box;
    border: none;
    box-shadow:         inset 0 0 5px rgba(0, 0, 0, 0.1), 
                        0 1px 0 rgba(255, 255, 255, 0.5), 
                        inset 0 1px 2px rgba(0, 0, 0, 0.3), 
                        0 0 40px rgba(255, 255, 255, 0.3);
    -moz-box-shadow:    inset 0 0 5px rgba(0, 0, 0, 0.1), 
                        0 1px 0 rgba(255, 255, 255, 0.5), 
                        inset 0 1px 2px rgba(0, 0, 0, 0.3), 
                        0 0 40px rgba(255, 255, 255, 0.3);
    -o-box-shadow:      inset 0 0 5px rgba(0, 0, 0, 0.1), 
                        0 1px 0 rgba(255, 255, 255, 0.5), 
                        inset 0 1px 2px rgba(0, 0, 0, 0.3), 
                        0 0 40px rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1), 
                        0 1px 0 rgba(255, 255, 255, 0.5), 
                        inset 0 1px 2px rgba(0, 0, 0, 0.3);
    color: #333;
    height: 26px;
    margin: 0px 40px 0 40px;
    outline: none;
    padding: 0 35px 0 20px;
    transition:         all .1s linear;
    -moz-transition:    all .1s linear;
    -o-transition:      all .1s linear;
    -webkit-transition: all .1s linear;
    width: 75%;
    margin-top: 3px;
}

div.search_bar label {
    background: transparent url(http://f.cl.ly/items/2a2Z0V0L0J1p3V082d3r/icon-search.png) no-repeat top left;
    cursor: pointer;
    display: block;
    height: 17px;
    left: 88%;
    position: relative;
    text-indent: -99999px;
    top: -21px;
    width: 16px;
}

下面的内容应该可以工作(警告-未经测试):

$(document).ready(function() {
    $('#ca').click(function() {
        $('#form1').submit();
    });
});

您还必须向表单添加id。id="form1"，当然，如果你想使用这个解决方案，就要使用jQuery。但是正如上面的评论所提到的，使用标签作为按钮是不好的做法。

由于opera mini等迷你浏览器可能不支持JS，因此只需删除提交按钮的边框，将其全部保存在html

中。HTML

<input type="submit" id='submit' value="search" >

CSS

#submit {border: none;}

给它一个平面的感觉，显然你可以用任何你想要的方式来设计按钮，但是简单地删除边框会给它一个"标签"的感觉。

我不知道你的问题是关于它的外观还是功能。如果是后者，那么因为你是用一种非常规的方式，你总是可以去掉

这个形式

<input type="text" id="term" value="" />  
<label id="ca" for="term">Search</label>

与jQuery

$("#ca").click(function(){ window.location.href = "/search.php?term="+$("#term").val(); });
没有jQuery

HTML <label id="ca" for="term" onclick="doSearch();">Search</label>
Javascript:

function doSearch(){ var term = document.getElementById("term").value; window.location.href = "/search.php?term="+term; }
不推荐，但我希望它能帮助你达到目的

把onClick属性放到Label中，就像

<label id="ca" for="search" onClick="this.form.submit()">Search</label>