Clickable search icon in background - html

Question

I have a search field with a search icon in the background. Here's the CSS:
input[type=search] {
outline: none;
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
background: #ededed url('$http://www.$domain/images/search-icon.png') no-repeat right 5px top 5px;
padding-left: 8px;
padding-right: 24px;
border: solid 1px #ccc;
width: 122px;
font-size:16px;
font-family: \"Lato\";
font-weight: 300;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 230px;
background-color: #fff;
border-color: #7486BA;
-webkit-box-shadow: 0 0 5px #7486BA;
-moz-box-shadow: 0 0 5px #7486BA;
box-shadow: 0 0 5px #7486BA;
}
#media screen and (max-width: 800px) {
input[type=search]:focus {
width: 122px;
}
}
input[type=search]:-moz-placeholder {
color: #DEDEDE;
}
input[type=search]::-webkit-input-placeholder {
color: #DEDEDE;
}
and here's the HTML:
<form id=\"search_form\" method=\"GET\" action=\"$http://www.$domain/\">
<input type=\"search\" id=\"search\" name=\"search\" placeholder=\"$search_placeholder\" class=\"awesomplete\" autocomplete=\"off\">
</form>
The form can only be submit by pressing enter button. What would be the easiest way to make the search icon clickable ?
I tried making a 30x30 anchor with relative positionning on top of the search icon but it wasn't working well