Wie kann ich dieses Bild in CSS "anklickbar" machen?

Question

Hier ist mein HTML-Code:

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

Und hier ist der CSS es cool und modern aussehen:

#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; 
} 

Das Problem ist, ich erlebe, dass das Suchsymbol nur ein statisches Bild ist . Ich möchte es in der Lage sein, die Informationen, die der Benutzer eingegeben hat, einzureichen und nicht nur als dekoratives Bild da stehen. Wenn der Benutzer etwas in das Suchfeld eingibt und er auf dieses Symbol klickt, sollte er zu der Seite gelangen, auf der die Suchergebnisse angezeigt werden. Kann ich das irgendwie machen? Ich habe viele moderne Seiten gesehen, die dieses Suchsymbol haben und es ist anklickbar ... Aber meine Logik bringt mich nicht auf das Level, wo ich verstehen kann, wie das gemacht wird ... Kann jemand helfen?

Answer 1

Sie können Ihre Suche Symbol in <a></a> Tags wickeln, dass die Art und Weise Ihr Bild anklickbar sein und den Benutzer auf die Seite nehmen können Sie wollen, sobald er darauf klickt: Hier ist ein Beispiel:

<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

Was Sie erreichen möchten, kann mit Raw CSS nicht erreicht werden; Sie müssen JavaScript verwenden und einen Click-Ereignishandler an das Element anhängen.

Leider, wenn man bedenken Sie von background-image machen, dein Bild ist im wesentlichen ‚Teil‘ das ganzen <input> Element selbst, und soweit ich weiß, kann man nicht die Klick-Funktionalität trennen (ohne ein separates Element für das Bild zu verwenden).

Nachdem Sie das gesagt haben, können Sie es so machen, dass das Formular übermittelt, wenn ein Teil der <input> mit dem folgenden angeklickt wird. Dies kann durch die doppelte Kontrolle verbessert werden, dass es tatsächlich Inhalt ist in den Eingang eingegeben, bevor das Formular Unterwerfung unter Feuer erlaubt:

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>

hoffe, das hilft! :)