修改input輸入框的樣式

2021-08-20 13:46:35 字數 861 閱讀 4705

修改input輸入框的樣式

我們在寫表單的時候，經常需要自定義表單的樣式，當然input輸入框也不例外，那麼如何能寫出好看一點的輸入框呢？

下面我們來寫個簡單的表單

首先要將input輸入框的預設樣式去掉


然後我們加上邊框和圓角，並設定input的高度和字型大小和顏色： 


font-size:1.4em;


height:2.7em;


border-radius:4px;


border:1px solid #c8cccf


;color:#6a6f77


;
然後將input輸入框的輪廓去掉： 


outline:0


;
這樣我們的輸入框就差不多好了，input樣式完整**如下： 


.input_control


input[type="text"],


#btn1


,#btn2


input[type="text"]:focus


效果如下圖：


通過上圖的input樣式我們可以看出，雖然比預設樣式好看了許多，但是還有一些問題，比如placeholder的預設字型顏色是灰色，看起來有點淺，我們繼續修改樣式，那麼如何修改placeholder的樣式呢？我們加上如下**即可：


::-moz-placeholder 


::-moz-placeholder 


input::-webkit-input-placeholder


修改之後樣式如下圖： 


截圖上input的邊框有點虛，實際效果比這個好，這樣就完成了乙個簡單漂亮的表單了。


修改input輸入框的樣式
 
input 輸入框限制
只能輸入數字和乙個小數點 function clearnonum obj g,只保留第乙個.清除多餘的 obj.value obj.value.replace replace g,replace obj.value obj.value.replace d d 1 2.3 只能輸入6個小數 親測有用！...


input輸入框輸入金額校驗
輸入框 js校驗只能輸入帶兩位小數的金額 price on input propertychange function g,保證.只出現一次，而不能出現兩次以上 this.value this.value.replace replace g,replace 只能輸入兩位小數 this.value t...


input輸入框數字限制
正規表示式驗證輸入框的內容 單價 只能輸入數字和小數點，且必須數字開頭並大於或者等於1，限制最多三位小數，小數點為最後一位時，失去焦點時自動截掉 text value name price onkeyup validatenum1 this onblur todecimal this placeho...