Search Box Css Modification

Question

ich dieses Suchfeld auf meiner Website gemacht haben:

http://codepen.io/betacoding/pen/JKkJqY

und ich möchte es einige Updates machen:

1. das Symbol in das Suchfeld ein machen Taste für die Suche arbeiten
2. stellen Sie die Höhe des Suchfeld

Ich habe versucht, die Höhe des Suchfeld Einstellung mit:

padding: 5px 20px 5px 30px; 

und die 5px zu 15px machen aber in meinem Mozilla-Browser sehr klein der Text wird und es keine Erhöhung der Kastengröße. In den anderen Browsern funktioniert es einwandfrei.

Und auch wenn es nur in css und html ohne Javascript oder jquery erreicht werden könnte, wäre es perfekt.

Answer 1

Um Symbol als Schaltfläche verwenden Sie es in einem Eingangs verwandeln müssen (einreichen)

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

Ihre CSS

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

Größe ist Frage ändert unklar, Stift einige in jedem Browser aussieht (auch Padding ändern)

Wenn Sie Ihre Suchhöhe ändern möchten, fügen Sie einfach größere Höhe zu CSS, zum Beispiel

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

Und sein Aussehen gleichen in Mozilla, Chrome und IE

Here a working pen