2. 程式人生 > >HTML5 input改變預設樣式

HTML5 input改變預設樣式

阿新 • • 發佈：2019-01-21

最近使用了html5中的input，感覺很牛逼，有很多型別和屬性方便小夥伴去做各種好看的表單樣式。下面我們先來看看HTML5預設的input的一些樣式（本文主要討論的是驗證樣式）：
預設驗證樣式：
這裡寫圖片描述
程式碼：
<!-- 預設的input -->
<form>
<input type="text" required><br/>
<input type="possword" required><br/>
<input type="submit">
</form>


可以看出當我們添加了required屬性時，HTML5將自動幫我們對input進行驗證，看是否使用者有輸入資訊。
但是有時候我們想根據自己的需求彈出提示，這個時候就需要覆蓋預設的input樣式。
下面是一個自定義input樣式的例子：
這裡寫圖片描述
我們在input框的右邊加上了錯誤和正確時的圖片，同時，可以看到當我們點選提交時，如果輸入有無效資訊，就會出現我們自定義的提示資訊。下面給出程式碼：

<style type="text/css">
        input{
          margin: 10px 0;
        }
        /*無效輸入時的樣式*/
 

        input:required:invalid{
            background-image: url(error.png);
          background-position: right center;
          background-repeat: no-repeat;
          border-color: red;
          box-shadow: none;
           /* 相容FF13以前版本 */
          -moz-box-shadow: none;
        }
         /*有效輸入時的樣式*/
 

        input:required:valid{
          background-image: url(true.png);
          background-position: right center;
          background-repeat: no-repeat;
          border-color: green;
          box-shadow: none;
           /* 相容FF13以前版本 */
          -moz-box-shadow: none;
        }
    </style>
</head>
<body>
    <!-- 修改後的input -->
    <form>
      <input type="text" name="" required><br/>
      <input type="text" name="" required pattern=".{2,5}" oninvalid="setCustomValidity('兩至五個漢字')" oninput="setCustomValidity('')"><br/>
      <input type="text" name="" required oninvalid="setCustomValidity('請輸入使用者名稱')" oninput="setCustomValidity('')"><br/>
      <input type="submit" name="">
    </form>
</body>

（1）首先， 我們在input添加了required屬性（規定必需在提交之前填寫輸入欄位。），當用戶沒有輸入任何資訊時，將彈出HTML5預設的或是自定義的資訊（oninvalid事件中定義的資訊 ），如第三個input它將彈出“請輸入使用者名稱”這樣的提示資訊。同時，HTML5提供了patern屬性，它接受一個正則表示式，當表單提交時這個正則表示式會被用於驗證表單內非空的值，如果控制元件的值不匹配這個正則表達就會彈出提示框，並阻止表達提交。

（2）其次，提示框內的文字可以使用setCustomValidity（）方法來自定義，通過oninvalid和oninput事件進行呼叫。其中，oninvalid事件是當用戶輸入的資訊不合法時並且會在表單submit事件之前進行觸發，同時如果驗證不通過的話就不會觸發表單的submit。而提交時會先驗證所有表單元素是值是否有效。除了提交外還可以手動呼叫checkValidity方法來執行驗證，或是事件監聽方式（可以自己來定義js程式碼）。oninput事件在使用者輸入時觸發。該事件類似於onchange 事件。

oninput事件與onchange 事件區別：

oninput 事件在元素值發生變化是立即觸發，oninput事件是IE之外的大多數瀏覽器支援的事件，在value改變時觸發，實時的，即每增加或刪除一個字元就會觸發，然而通過js改變value時，卻不會觸發。從瀏覽器的自動下拉提示中選取時，也不會觸發。
onchange事件 在元素失去焦點時觸發（onchange事件在內容改變（兩次內容有可能還是相等的）且失去焦點時觸發；）。另外一點不同是 onchange 事件也可以作用於 <keygen> 和 <select> 元素。

（3）使用css對樣式進行修改
/*===包含required的表單===*/
/* 無效 */
input:required:invalid{
CSS程式碼
}
/* 有效 */
input:required:valid{
CSS程式碼
}
上例中的error和true圖片就是通過css來設定的，通過css可以設定使用者在輸入有效與無效時的樣式。

最後，推薦一篇深度好文

oninput="setCustomValidity('')"表示在使用者輸入的時候將錯誤提示設定為空字串（就是在輸入時沒有提示出來）

這裡寫圖片描述

嘿嘿、、、、、、

相關推薦

HTML5 input改變預設樣式

最近使用了html5中的input，感覺很牛逼，有很多型別和屬性方便小夥伴去做各種好看的表單樣式。下面我們先來看看HTML5預設的input的一些樣式（本文主要討論的是驗證樣式）： 預設驗證樣式： 程式碼： &

改變input的預設樣式

1. 聚焦時不出現藍色邊框 outline:none;  2.修改 input 預設的placeholder input::-webkit-input-placeholder {    font-size: 0.4rem;&nbs

檔案上傳input file預設樣式修改

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>檔案上傳按鈕修改樣式</title> <style> .file-box{ display:

ios html5 網頁取消預設樣式

ios的的預設樣式修改成扁平化的樣式 重要的一句css  -webkit-appearance: none;  將樣式清除 單數會出現將raido的選擇按鈕也會消失 所以需要對radio的樣式進行重新設定 設定input框的樣式 input[type="text

checkbox選中時如何改變預設樣式

剛剛釋出了人生中的第一篇部落格，然後期待的點開，回味一下，不看不知道，一看嚇一跳，我的天，前面都是些什麼東西，還是說所有的第一篇都是那樣的，如果您不小心點開了我。。。的第一篇部落格，請直接跳到最下面，那幾行才是我的內容，這是第二篇，希望不要在那什麼什麼的。 好了，我的廢話太多了，說點有料

IOS中使用網頁時input去除預設樣式的兩個屬性

1、-webkit-appearance    使用“-webkit-appearance: none; ”來改變按鈕在iPhone下的預設風格，其實我們可以反過來思路，使用“appearance”屬性，來改變任何元素的瀏覽器預設風格，簡單的說，你可以使用“appeara

css：預設的checkbox、input、radio太醜了？手把手教你改變使用純css3改寫的帶動畫的預設樣式

專案的github地址為： https://github.com/sunshine940326/css3formeledemo 本文首發於我的個人部落格，http://cherryblog.site/ ；歡迎大家檢視我的其他部落格 最近在

改變input type file的預設樣式

話說<input id="videoUrl" type="file" 的樣式確實不怎麼好看。 1.原input設定透明opacity:0;使用position：absolute，使層重疊 2.用

修改 HTML5 input type date預設樣式

出處 https://blog.csdn.net/byc233518/article/details/79168608 1.時間選擇的種類: HTML程式碼：  選擇日期：<input type="date" value="2017-06-01" />  選擇時

css改變預設的checkbox樣式

input[type="checkbox"]{ -webkit-appearance: none; vertical-align:middle; margin-top:0; background:#fff; border:#999 solid 1px;

React 專案中修改 Ant Design 的預設樣式(Input Checkbox 等等

修改樣式更符合專案的需求特別是在 Input 和 Checkbox 等等一系列 試過很的方式都有問題， 比如直接在行內新增樣式會無法傳遞到特定的層級 最好的辦法是新增 id 可行 渲染部分程式碼 <Card title = "修改預設樣式">

如何修改input[type="file"]的預設樣式

轉載：https://blog.csdn.net/dear_mr/article/details/56040549 1.首先我們先來看一下input[type=”file”]預設的樣子 <input type="file" /> 1 2.改變input[type

去除input邊框以及選中時邊框 預設樣式

<input type="text" > input { border: 0; // 去除未選中狀態邊框 outline: none; // 去除選中狀態邊框 background-color: rgba(0, 0,

css修改滾動條的預設樣式、input的placeholder的預設樣式

css修改滾動條的預設樣式： .box::-webkit-scrollbar {/*滾動條整體樣式*/ width: 4px; /*高寬分別對應橫豎滾動條的尺寸*/ height: 4px; } .box::-webkit-scrollbar-thumb {/*滾

去除input[type=number]的預設樣式

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

HTML5—————— 自定義(滑動條)input[type="range"]樣式

1、如何使用滑動條？ 用法很簡單，如下所示： <input type="range" value="0">11 各瀏覽器原始樣式如下：  Chrome:   Firefox:    IE 9+:        常用（部分）屬性如下： 屬性 描述 max 設定或返回滑塊控制元件的最大值

谷歌瀏覽器覆蓋input預設樣式

一、修改場景：預設的樣式通過和背景顏色不一致，有一些突兀，體驗不好。二、問題根因：谷歌預設的樣式為淡黃色三、解決思路1、覆蓋掉預設的顏色    適用場景：背景色或者背景圖片的顏色是一致的，且沒有變化 &:-webkit-autofill { -webk

如何修改input[type="file"]的預設樣式

1.首先我們先來看一下input[type=”file”]預設的樣子 <input type="file" /> 2.改變input[type=”file”]預設的樣子 這裡我

如何改變預設的checkbox樣式

我們在專案中使用到input標籤的checkbox的時候，它的預設樣式通常無法滿足專案需求，主要是它顯得有點小而醜。將它根據專案的需求進行改造就是我們要做的事情了，下面講兩種常用的做法。 1.使用背景圖片代替選中效果 主要原理就是將原來的checkbox隱藏

修改單選框，複選框預設樣式 input[type='radio'] input[type="checkbox"]

由於業務需求，本樣式中修改的單選框和複選框的樣式是一樣的。 效果圖：         複選框                                                           單選框