我正在使用一个网站模板，它有一个搜索表单，文本字段中有一个图标。
当输入一个值并且用户单击“Enter”时，表单将被执行。然而，当点击搜索图标时，没有任何反应。
图标是通过很棒的字体库创建的http://fontawesome.io/ 并通过 css 添加
content: '\f002';
这是代码的 fiddle : https://jsfiddle.net/BamBamm/df2gzkbb/10/
我该如何解决这个问题？谢谢。
#search form {
text-decoration: none;
position: relative;
}
#search form:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
#search form:before {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
color: #7f888f;
content: '\f002';
cursor: default;
display: block;
font-size: 1.5em;
height: 2em;
line-height: 2em;
opacity: 0.325;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 2em;
}
input[type="text"] {
height: 2.75em;
}
input[type="text"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
background: #ffffff;
border-radius: 0.375em;
border: none;
border: solid 1px rgba(210, 215, 217, 0.75);
color: inherit;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
}
body, input, select, textarea {
color: #7f888f;
font-family: "Open Sans", sans-serif;
font-size: 13pt;
font-weight: 400;
line-height: 1.65;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/3.1.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="search" class="alt">
<form action="javascript:alert('Inner Function performed!');">
<input type="text" name="search_query" value="defaultValue"/>
</form>
</div>最佳答案
你可以在提交按钮上给图标
请检查代码:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<div class="container">
<div class="col-md-3">
<form class="navbar-form" role="search" action="javascript:alert('Inner Function performed!');">
<div class="input-group add-on">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>关于Html CSS 搜索栏 : nothing happens when clicking the icon，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48075547/