無法找到一種方法來糾正我的輸入文本框

所以我有一個小輸入框，我只想接受數字，我有外觀和一切正常，但當我點擊它時，該框畫另一個框+向上並向下箭頭。想要擺脫兩者。另外我怎樣才能像第一張圖片一樣向它的乞討添加一個小圖標。無法找到一種方法來糾正我的輸入文本框

我想這個盒子+內點擊添加小的搜索圖標

的時候，但我得到這個：

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/

來源

2017-10-17 Alex

的[？我可以隱藏HTML5號碼輸入的數字顯示框（可能的複製https://stackoverflow.com/questions/3790935/can-i- hide-the-html5-number-input-s-spin-box） –

您可以刪除邊框搭配：

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

的箭頭是有點難以消除，你需要爲不同的瀏覽器不同的規則。

對於Webkit的瀏覽器（Chrome等），您需要：

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

對於Firefox，您需要：

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

所有這些都被添加到下面的例子：

.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>

希望這有助於！ :)

來源

2017-10-17 23:31:02

太棒了！這麼好解釋！喲，你碰巧知道在背景上添加小搜索項的答案嗎？ :) – Alex

輸入是數字類型默認有箭頭。你可以嘗試一些CSS來隱藏它。試試這個：

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 */ 
}

來源

2017-10-17 23:28:27 FutoRicky

<input type="number" >默認情況下數字類型的輸入具有箭頭。

這裏是你如何隱藏箭頭：

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

來源

2017-10-17 23:43:52

無法找到一種方法來糾正我的輸入文本框

回答

相關問題