Can't find a way to correct my input text box

Question

So I have a little input box where I only want to accept numbers and I have the looks and everything fine but when I click on it the box draws another box + up and down arrows. Want to get rid of both. Also how can I add a little icon to the begging of it like in the first image.

I want this when clicking inside the box + adding the little search icon

But I get this:

html:

<div class="GeolocationInput  os-animation" data-os-animation="zoomInUp" data-os-animation-delay="1.5s">
    <div style="width: 100%;">
        <form class="GeolocationInput-form ">
            <div>
                <input type="number"  class="GeolocationInput-input" placeholder="Escribe tu Codigo Postal..." >
            </div>
            <div>
                <button class="GeolocationInput-button" disabled="">Continuar</button>
            </div>
        </form>
    </div>
</div>

CSS:

.GeolocationInput {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

.GeolocationInput .GeolocationInput-form {
    width: 274px;
    margin: 10px auto 0;
}
.GeolocationInput .GeolocationInput-input {
    width: 274px;
}

.GeolocationInput-input {
    box-sizing: border-box;
    width: 90%;
    border: 1px solid #aebcce;
    border-radius: 100px;
    padding: 15px 40px 10px 42px;
    margin: 0 0 15px;
    font-size: 16px;
    font-family: proxima-nova,Helvetica Neue,Helvetica,Avenir,Lucida Grande,Arial,sans-serif;
    font-weight: 300;
}


.GeolocationInput-button {
    background: #635bd4;
    max-width: 275px;
    width: 90%;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    padding: 16px 32px;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 100px;
    border: none;
    font-family: proxima-nova,Helvetica Neue,Helvetica,Avenir,Lucida Grande,Arial,sans-serif;
    font-weight: 500;
    text-align: center;
}

http://jsfiddle.net/zhpmahnq/192/

Possible duplicate of [Can I hide the HTML5 number input’s spin box?](https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box) — Neeraj Kumar, Oct 17 '17 at 23:46

score 2 · Accepted Answer · answered Oct 17 '17 at 23:31

You can remove the border with:

.GeolocationInput-input:focus {
    outline: none;
}

The arrows are a little harder to remove, and you need different rules for different browsers.

For Webkit browsers (like Chrome), you need:

.GeolocationInput-input::-webkit-outer-spin-button,
.GeolocationInput-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

For Firefox, you need:

.GeolocationInput-input {
    -moz-appearance: textfield;
}

All of these have been added to the following example:

.GeolocationInput {
 max-width: 700px;
 margin: 0 auto;
 text-align: center;
 -webkit-font-smoothing: antialiased;
}

.GeolocationInput .GeolocationInput-form {
 width: 274px;
 margin: 10px auto 0;
}
.GeolocationInput .GeolocationInput-input {
 width: 274px;
}

.GeolocationInput-input {
 box-sizing: border-box;
 width: 90%;
 border: 1px solid #aebcce;
 border-radius: 100px;
 padding: 15px 40px 10px 42px;
 margin: 0 0 15px;
 font-size: 16px;
 font-family: proxima-nova,Helvetica Neue,Helvetica,Avenir,Lucida Grande,Arial,sans-serif;
 font-weight: 300;
  -moz-appearance: textfield;
}

.GeolocationInput-input:focus {
    outline: none;
}

.GeolocationInput-input::-webkit-outer-spin-button,
.GeolocationInput-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.GeolocationInput-input::-webkit-outer-spin-button,
.GeolocationInput-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.GeolocationInput-button {
 background: #635bd4;
 max-width: 275px;
 width: 90%;
 color: #fff;
 cursor: pointer;
 font-size: 16px;
 padding: 16px 32px;
 text-decoration: none;
 white-space: nowrap;
 border-radius: 100px;
 border: none;
 font-family: proxima-nova,Helvetica Neue,Helvetica,Avenir,Lucida Grande,Arial,sans-serif;
 font-weight: 500;
 text-align: center;
}

        <div class="GeolocationInput  os-animation" data-os-animation="zoomInUp" data-os-animation-delay="1.5s">
            <div style="width: 100%;">
                <form class="GeolocationInput-form ">
                    <div>
                        <input type="number"  class="GeolocationInput-input" placeholder="Escribe tu Codigo Postal..." >
                    </div>
                    <div>
                        <button class="GeolocationInput-button" disabled="">Continuar</button>
                    </div>
                </form>
            </div>
        </div>

Hope this helps! :)

amazing! so well explained! Do yo you happen to know the answer to add the little search item on the background? :) — Alex, Oct 18 '17 at 10:10

Can't find a way to correct my input text box

1 Answers1