Search Box Css Modification

I have made this search box on my website:

and I would like to make it some updates:

make the icon inside the search box a button to work for searches
adjust the height of the search box

I've tried adjusting the height of the search box using:

padding: 5px 20px 5px 30px;

and making the 5px to 15px but in my Mozilla browser the text becomes very small and there is no increase in box size. In the other browsers it works ok.

And also if it could be achieved only in css and html no javascript or jquery it would be perfect.

Solution

To use icon as a button you must transform it in an input (submit)

<input type='text' id="pto_searchbox" name='pto_q' value="%PTO_Q%" placeholder="Looking For A Handbag?"  />
<input type='submit' class='imgSearch' value='' />
<input type='submit' class="btn" value='Search' />

changing your CSS to

#pto_searchbox {
    width: 50%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 10px;
    font-size: 20px;
    padding: 5px 20px 5px 30px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.imgSearch{
    border: 0;
    height: 30px;
    width: 30px;
    background-color: #FFFFFF;
    margin-left: -40px;
    margin-bottom: 7px;
    vertical-align: middle;
    background-image: url('http://s31.postimg.org/vooqzqba3/toolbar_find_1.png');
    background-repeat: no-repeat;
}

Size question is unclear, your pen looks some in any browser (even changing padding)

If you wanna change your search height, simply add bigger height to CSS, for example

#pto_searchbox {
    height: 60px;
    width: 50%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 10px;
    font-size: 20px;
    padding: 5px 20px 5px 30px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

And its looks same in Mozilla, Chrome and IE

Here a working pen