修改input輸入框的樣式
我們在寫表單的時候,經常需要自定義表單的樣式,當然input輸入框也不例外,那麼如何能寫出好看一點的輸入框呢?
下面我們來寫個簡單的表單
首先要將input輸入框的預設樣式去掉然後我們加上邊框和圓角,並設定input的高度和字型大小和顏色:
font-size:1.4em;然後將input輸入框的輪廓去掉:height:2.7em;
border-radius:4px;
border:1px solid #c8cccf
;color:#6a6f77
;
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...