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>

希望を！ :)