Impossible de trouver un moyen de corriger ma zone de saisie

J'ai donc une petite boîte de saisie où je veux seulement accepter les chiffres et j'ai les regards et tout va bien mais quand je clique dessus la boîte dessine une autre boîte + et des flèches vers le bas. Voulez-vous vous débarrasser des deux. Aussi comment puis-je ajouter une petite icône à la mendicité comme dans la première image.Impossible de trouver un moyen de corriger ma zone de saisie

Je veux que ce en cliquant dans la boîte + en ajoutant la petite icône de recherche

Mais je reçois ceci:

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/

Source

2017-10-17 Alex

double possible de [Puis-je cacher la boîte de spin entrée numérique HTML5] (https://stackoverflow.com/questions/3790935/can-i- hide-the-html5-number-input-s-spin-box) –

Vous pouvez supprimer la frontière avec:

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

Les flèches sont un peu plus difficiles à enlever, et vous avez besoin des règles différentes pour les différents navigateurs.

Pour les navigateurs Webkit (comme Chrome), vous avez besoin:

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

Pour Firefox, vous avez besoin:

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

Tous ces éléments ont été ajoutés à l'exemple suivant:

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

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

 
.GeolocationInput-input { 
 
\t box-sizing: border-box; 
 
\t width: 90%; 
 
\t border: 1px solid #aebcce; 
 
\t border-radius: 100px; 
 
\t padding: 15px 40px 10px 42px; 
 
\t margin: 0 0 15px; 
 
\t font-size: 16px; 
 
\t font-family: proxima-nova,Helvetica Neue,Helvetica,Avenir,Lucida Grande,Arial,sans-serif; 
 
\t 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 { 
 
\t background: #635bd4; 
 
\t max-width: 275px; 
 
\t width: 90%; 
 
\t color: #fff; 
 
\t cursor: pointer; 
 
\t font-size: 16px; 
 
\t padding: 16px 32px; 
 
\t text-decoration: none; 
 
\t white-space: nowrap; 
 
\t border-radius: 100px; 
 
\t border: none; 
 
\t font-family: proxima-nova,Helvetica Neue,Helvetica,Avenir,Lucida Grande,Arial,sans-serif; 
 
\t font-weight: 500; 
 
\t 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>

Espérons que cela aide! :)

Source

2017-10-17 23:31:02

incroyable! si bien expliqué! Est-ce que vous connaissez la réponse pour ajouter le petit élément de recherche sur le fond? :) – Alex

entrées qui sont des types de nombres par défaut ont les flèches. Vous pouvez essayer quelques css pour le cacher. Essayez ceci:

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button { 
    /* display: none; <- Crashes Chrome on hover */ 
    -webkit-appearance: none; 
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ 
}

Source

2017-10-17 23:28:27 FutoRicky

<input type="number" > Les entrées qui sont des types de nombre ont par défaut les flèches.

Voilà comment vous pouvez cacher cette flèche:

input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
-webkit-appearance: none; 
margin: 0; 
} 
input[type="number"] { 
-moz-appearance: textfield; 
} 

<input type="number" />

Source

2017-10-17 23:43:52

Impossible de trouver un moyen de corriger ma zone de saisie

Répondre

Questions connexes