如何在CSS中使該圖像「可點擊」？

Question

這裏是我的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> 

而這裏的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; 
} 

我遇到的問題是，搜索圖標只是一個靜態圖像。 我希望它能夠提交用戶輸入的信息，而不只是站在那裏作爲裝飾圖像。當用戶在搜索框中鍵入內容時，他點擊該圖標時，應該將他帶到顯示搜索結果的頁面。有什麼辦法可以做到這一點？ 我見過很多現代網站都有這個搜索圖標，它是可點擊的......但是我的邏輯並沒有把我帶到我可以理解的程度......任何人都可以幫忙嗎？

Answer 1

你可以用你的搜索圖標<a></a>標籤，這樣，你的形象會點擊，一旦他點擊它可以將用戶帶到你想要的頁面：下面是一個例子：

<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> 

Answer 2

你試圖實現的東西實際上不能用原始CSS完成;您需要使用JavaScript並將單擊事件處理程序附加到該元素。

不幸的是，考慮到你正在做使用background-image，你的形象基本上是整個<input>元素本身「的一部分」，而據我所知，你不能分離出點擊的功能（而不使用圖像的單獨元素）。

話雖如此，你可以這樣做，以便表單在<input>的任何部分點擊以下內容時提交。這可以通過改善仔細檢查，實際上是有內容輸入到輸入允許表單提交到爐火前：

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>

希望這有助於！ :)