如何在CSS中将此图像设为“可点击”？ [重复]

This question already has an answer here:

这个问题在这里已有答案：

How do I add a “search” button in a text input field? 7 answers
如何在文本输入字段中添加“搜索”按钮？ 7个答案

Here's my html code:

这是我的HTML代码：

<div class="maindiv">
<form id="myform" name="myform" method="post" action="schitems.php">  
<input type="search"  id="itemcd" name="itemcd" class="inputfields" placeholder="Type an Ingredient..." />
</form>
</div>

And here's the css to make it look cool and modern:

这是让它看起来很酷和现代的css：

#myform {width:260px; margin:0 auto;}

input[type="search"]{
    padding:18px 15px 18px 52px;
    font-size:1rem;
    color:#1f5350;
/*removing boder from search box*/
    border:none;
/*defining background image as a search symbol*/
    background-image:url(search.png);
    background-repeat:no-repeat;
/*background-size*/
-webkit-background-size:25px 26px;
   -moz-background-size:25px 26px;
     -o-background-size:25px 26px;
        background-size:25px 26px;
/*positioning background image*/
    background-position:8px 14px;
/*changing background color form white*/
    background-color:#7accc8;
    outline:0;
}
/*now using placeholder property to change color of placholder text and making it consitent accross the browser by use of prefix*/
input[type="search"]::-webkit-input-placeholder{
    color:#b1e0de;
}
input[type="search"]:-moz-placeholder { /* Firefox 18- */
   color: #b1e0de;
}
input[type="search"]::-moz-placeholder {  /* Firefox 19+ */
   color: #b1e0de;
}
input[type="search"]:-ms-input-placeholder {  /* interner explorer*/
   color: #b1e0de;
}

The problem I'm experiencing is that, the search icon is just a static image. I want it to be able to submit the info which the user typed, and not just stand there as a decorative image. When the user types something into the search box, and he clicks on this icon, it should take him to the page where the search results are shown. Is there a way I can do this? I've seen many modern sites have this search icon and it's clickable... But my logic does not take me to the level where I can understand how that's done... Can anyone help?

我遇到的问题是，搜索图标只是一个静态图像。我希望它能够提交用户输入的信息，而不仅仅是作为装饰图像站在那里。当用户在搜索框中输入内容并点击此图标时，应将其带到显示搜索结果的页面。有没有办法可以做到这一点？我已经看到很多现代网站都有这个搜索图标，它是可点击的...但我的逻辑并没有把我带到我能理解这是怎么做的水平......任何人都可以帮忙吗？

2 个解决方案

#1

You can wrap your search icon in <a></a> tags, that way your image will be clickable and can take the user to the page you want once he clicks on it: Here's an example:

您可以将搜索图标包装在标记中，这样您的图像就可以点击，并且可以在用户点击它之后将用户带到您想要的页面：以下是一个示例：

    <div class="maindiv">
    <form id="myform" name="myform" method="post" action="schitems.php">  
    <input type="search"  id="itemcd" name="itemcd" class="inputfields" placeholder="Type an Ingredient..." />
<a href="search_results.html"><img src="search_icon.jpg" alt="search"></a>
    </form>
    </div>

#2

-1

What you're trying to achieve can't actually be accomplished with raw CSS; you need to use JavaScript and attach a click event handler to the element.

您尝试实现的目标实际上无法通过原始CSS实现;您需要使用JavaScript并将click事件处理程序附加到元素。

Unfortunately, considering you're making use of background-image, your image is essentially 'part of' the whole <input> element itself, and as far as I'm aware, you can't separate out the click functionality (without making use of a separate element for the image).

不幸的是，考虑到你正在使用背景图像，你的图像基本上是整个元素本身的“一部分”，据我所知，你不能分离点击功能（不做为图像使用单独的元素）。

Having said that, you can make it so that the form submits when any part of the <input> is clicked on with the following. This can be improved by double-checking that there is actually content entered into the input before allowing the form submission to fire:

话虽如此，您可以创建它，以便在使用以下内容单击的任何部分时提交表单。这可以通过在允许表单提交触发之前仔细检查实际输入到输入中的内容来改进：

var form = document.getElementById('myform');
var input = document.getElementById('itemcd');
input.onclick = function() {
  if (this.value.length > 0) {
    form.submit();
  }
}

#myform {
  width: 260px;
  margin: 0 auto;
}

input[type="search"] {
  padding: 18px 15px 18px 52px;
  font-size: 1rem;
  color: #1f5350;
  /*removing boder from search box*/
  border: none;
  /*defining background image as a search symbol*/
  background-image: url(http://placehold.it/100);
  background-repeat: no-repeat;
  /*background-size*/
  -webkit-background-size: 25px 26px;
  -moz-background-size: 25px 26px;
  -o-background-size: 25px 26px;
  background-size: 25px 26px;
  /*positioning background image*/
  background-position: 8px 14px;
  /*changing background color form white*/
  background-color: #7accc8;
  outline: 0;
}


/*now using placeholder property to change color of placholder text and making it consitent accross the browser by use of prefix*/

input[type="search"]::-webkit-input-placeholder {
  color: #b1e0de;
}

input[type="search"]:-moz-placeholder {
  /* Firefox 18- */
  color: #b1e0de;
}

input[type="search"]::-moz-placeholder {
  /* Firefox 19+ */
  color: #b1e0de;
}

input[type="search"]:-ms-input-placeholder {
  /* interner explorer*/
  color: #b1e0de;
}

<div class="maindiv">
  <form id="myform" name="myform" method="post" action="schitems.php">
    <input type="search" id="itemcd" name="itemcd" class="inputfields" placeholder="Type an Ingredient..." />
  </form>
</div>

Hope this helps! :)

希望这可以帮助！ :)

#1