自定義表單控件（我是一個粉刷匠）

時間  2019-11-30
標籤 自定義 表單 控件 一個 粉刷 欄目 HTML 简体版
原文   原文鏈接

爲何要寫這個文章呢？是由於寫頁面不可避免的就要用到表單控件啊，固然在我用最經常使用的text和button的時候，基本上用css直接改就能夠覆蓋其表單控件。 BUT！！ 當我用到一些單選框、多選框、數字框、還有文件框的時候，就有了這種默認樣式太過強大，超級的不合羣（和總體的風格徹底不一樣，什麼鬼啊都是！），並且這些樣式隨着瀏覽器的不一樣樣式還不同，並且和各類不同的系統有各自的風格，下面有一些我在使用過程當中遇到的部分type的input樣式，我也查了一些資料，這篇將不按期更新~javascript

  • 目錄
    • 自定義文本框input[type="text"]
    • 自定義單選框、多選框
      • input[type="radio"]，input[type="checkbox"]
      • 圖片
      • 字體圖標
    • 自定義文件框 input[type="file"]
    • 自定義數字框 input[type="number"]

自定義文本框input[type="text"]

哈哈，這個改樣式其實很簡單，可是我仍是要總結完整： 看一看不一樣瀏覽器中的文本框什麼樣？ Chrome的文本框——hover的時候沒有狀態，這是focus的時候的狀態，漸變的藍色框框。 css

chorme默認文本框.png
Firefox的文本框——hover和focus的狀態差很少，都是藍色邊框，這個沒有漸變
firefox默認文本框.png
IE的文本框——向來就是特立獨行的鵝，hover狀態是藍色的，focus狀態就變成了黑色的框，IE10還有個小×是什麼鬼，我點了一下個人value值都木有了，也是智能到要命。
IEhover默認文本框.png
IEfocus默認文本框.png

不過這個最簡單，第一個是要去掉那個邊框，第二個就是要去掉IE瀏覽器中的叉叉 下面是htmlhtml

<input type="text" value="這是一個文本框" id="text"/>
複製代碼

cssjava

#text{
  outline:none;
  border: 1px solid orange;  
 /*上面這個就能夠解決問題啦 */
/*下面這個就是隨意寫啦*/
  height: 30px;
  line-height: 30px;
  width: 140px;
  padding: 0 5px;
  font-size: 18px;

}
#text::-ms-clear{display: none;}
 /*這個只適用於IE10哦，若是要兼容IE9，IE8說是要用一個元素定位到這裏，也有人說要用textarea來代替text，目前也沒什麼更好的辦法*/
複製代碼

好了這下差很少了。 jquery

自定義文本框.png

密碼框input[type="password"]也是同樣哦web

自定義密碼框.png

自定義單選框、多選框

input[type="radio"]，input[type="checkbox"]

這個框框，看看他的原本面目 Chrome的單選框——灰灰的~ 正則表達式

Chrome的默認單選框.png

Firefox和IE的單選框——扁平化 chrome

Firefox和IE的默認單選框.png

下面來優化：有兩種方式，一種是找圖片，讓UI作一個和頁面風格同樣的單選框圖片。還有一種就是使用字體圖標，方便好使。 他們的html格式是不變的——使用label+input的形式去自定義樣式瀏覽器

圖片

先上html代碼app

<!--label表明了整個單選域，裏面的input是要有的，只不過是要隱藏掉，後面的i元素，是利用表單的圖片進行的替代，後面的span用來寫對應的文本-->
<label>
     <input type="radio" name="haha" value="haha"/>
     <i></i>
     <span>haha</span>
</label>
<label>
     <input type="radio" name="haha" value="hehe"/>
     <i></i>
     <span>hehe</span>
</label>
複製代碼

而後上css代碼

/*我從阿里巴巴下了一個32px × 32px的圖標，放在了同目錄下*/
/*把原來的單選框隱藏掉*/
input[type="radio"]{
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display: none;
}

label{
     display: inline-block;
     cursor: pointer;
}

/*代替的圖標*/
label input[type="radio"]+i{
     width: 32px;
     height: 32px;
     display: block;
     background: url("./radio.png") no-repeat;
     float: left;
}

/*選中的時候代替的圖標*/
label input[type="radio"]:checked+i{
     background: url("./radio-active.png") no-repeat;
}

/*後面的文字說明*/
label input[type="radio"]~span{
    display: block;
    line-height: 32px;
    height: 32px;
    float: left;
    font-family: 'Microsoft Yahei';
}

/*選中的時候文字說明*/
label input[type="radio"]:checked~span{
     color: #38d6ff;
}
複製代碼

下面看一下效果圖：

自定義單選框.png

字體圖標

上html代碼，只是在i標籤裏面加了font-awesome的字體圖標

<label>
      <input type="radio" name="haha" value="haha"/>
      <i class="fa fa-circle-o"></i>
      <span>haha</span>
</label>
<label>
       <input type="radio" name="haha" value="hehe"/>
       <i class="fa fa-circle-o"></i>
       <span>hehe</span>
</label>
複製代碼

css稍微有些變化

input[type="radio"]{
     appearance: none;
     -webkit-appearance: none;
     outline: none;
     display: none;
}

label{
     display: inline-block;
     cursor: pointer;
}

label input[type="radio"]+i{
      width: 32px;
      height: 32px;
      display: block;
      float: left;
      text-align: center; /*字體圖標垂直水平居中*/
      line-height: 32px;
      font-size:18px;  /*字體圖標大小用字體大小來控制*/
}

label input[type="radio"]~span{
     display: block;
     line-height: 32px;
     height: 32px;
     float: left;
     font-family: 'Microsoft Yahei';
}
複製代碼

字體圖標須要一些jquery代碼

$("i").click(function(){
    //若是是沒有選中的狀況
     if($(this).is(".fa-circle-o") == true){
           //當前的字體顏色改變，後面的字體改變
           $(this).css("color","#38d6ff").removeClass("fa-circle-o").addClass("fa-dot-circle-o").next().css("color","#38d6ff");
     }else{
           //選中的狀況
           $(this).css("color","#000").removeClass("fa-dot-circle-o").addClass("fa-circle-o").next().css("color","#000");
    }
})
複製代碼

效果圖以下

字體圖標自定義單選框.png

自定義文件框 input[type="file"]

文件框原來是什麼樣？ Chrome的文件框

Chrome的默認文件框.png
firefox的文件框（鼠標移上去的時候）
firefox的默認文件框.png
再來看看奇葩的 IE的默認文件框（這也是鼠標hover狀態的，我就不一一截不一樣的版本了，截完就明年了）
誰也不服就服你的IE默認文件框.png

趕忙的粉刷匠的工程開啓~~~~

下面來上代碼，先了解一下html的結構

<!--文件的input，須要隱藏的-->
<input type="file" id="myFile" class="myFile"/>
<!--實際顯示出來的按鈕-->
<div class="clickMe"></div>
<!--實際顯示出來選擇的文件名稱-->
<span class="textShow"></span>
複製代碼

而後咱們須要看看如何給這兩個元素來設置樣式

/*input文件的樣式，隱藏*/
.myFile{
    width:0;
    height:0;
    display:none;
}
/*按鈕的樣式，根據本身的需求來定*/
.clickMe{
    width: 105px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    background-color: #00c8ff;
    text-align: center;
    cursor: pointer;
    float: left;
    margin-right: 10px;
}
/*選擇文本名稱的樣式*/
.textShow{
    width: 100px;
    height: 30px;
    line-height: 30px;
}
複製代碼

下面就是js代碼了，用的jquery記得引用的時候要下下載jquery哦~

//給按鈕綁定點擊事件
$('.clickMe').off("click").on("click",function(){
        //當文件選擇完畢以後，觸發了改變的事件
        $("#myFile").off('change').on('change',function(){
            //得到的是絕對路徑，並非真實的路徑，只是一個虛擬的路徑
            var fileFullName = $(this).val();
            console.log(fileFullName);
            //得到的是文件名（正則表達式）
            var strFileName = fileFullName.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi,"$1");
            console.log(strFileName);
            //得到的是後綴名（正則表達式）
            var fileExt = fileFullName.replace(/.+\./,"");
            console.log(fileExt);
            //將完整的名字填入文本框中
            var realFileName = strFileName + "."+fileExt;
            $(".textShow").text(realFileName);
        })
        //觸發input的點擊事件
        $(".myFile").click();
    })
複製代碼

獲取文件的名稱的方法不少，這只是用正則表達式來獲取的。

下面來看看自定義的文件框是啥樣？

自定義文件框.png

完了以後會總結一些文件的表單控件的一些東西。仍是就着此次的主題來~，這樣的文件表單控件的樣式就完成了。

自定義數字框 input[type="number"]

看看這默認的框

chrome的默認數字框.png
Firefox的默認框
firefox的默認數字框.png
IE的默認框——和文本框沒有什麼區別好哇
IE的默認數字框.png

其實這個的主要功能就是計數，一些購物網站上會用到比較多，下面來大改造一下： 先來看一下html的結構

<!--外面要記得清除浮動，什麼方法均可以-->
<div class="clearfix">
       <!--這個是數字框-->
       <input type="number" name="number" value="1" class="f_l" id="number" />
       <!--這個是後面的上下加減按鈕-->
       <div class="f_l">
             <i class="add" id="add">+</i>
             <i class="subtract" id="subtract">-</i>
      </div>
</div>
複製代碼

而後是css添加樣式

/* 清除浮動 */
.clearfix::before,
.clearfix::after{
     content:"";
     height: 0;
     line-height: 0;
     display: block;
     visibility: none;
     clear: both;
}

.clearfix {
     *zoom: 1;
}

/*浮動*/
.f_l{
     float:left;
}

/*自定義數字框配置*/
input[type="number"]{
     width: 36px;
     height: 36px;
     border: 2px solid skyblue;
     border-radius: 4px 0 0 4px;  /*左上邊和左下邊有弧度*/
     color: #137ac6;
     font-size: 20px;
     padding: 0 10px;
     border-right: none;
     outline: none; /*去掉外邊框*/
     -moz-appearance:textfield;/*給火狐瀏覽器去掉上下加減號*/
}

/*數字框旁邊的加減號去掉*/
input[type="number"]::-webkit-inner-spin-button{
      -webkit-appearance: none;
}

input[type="number"]+div{
     cursor: pointer;
}

/*按鈕的通用樣式*/
input[type="number"]+div i{
     display: block;
     width: 28px;
     height: 17px;
     background-color: #137ac6;
     font-style: normal;
     line-height: 17px;
     text-align: center;
     font-size: 18px;
     color: #fff;
     border: 2px solid skyblue;
}

/*加號鍵的特殊樣式，右上角有弧度*/
input[type="number"]+div > .add{
     border-bottom: none;
     border-radius: 0 4px 0 0;
}

/*減號鍵的特殊樣式，右下角有弧度*/
input[type="number"]+div > .subtract{
     border-radius: 0 0 4px 0;
}
複製代碼

而後須要對兩個div進行綁定事件，一個加數字一個減數字，減的數字不能超過0···

//給加號按鈕綁定事件
$("#add").on("click",function(){
    var add = $("#number").val();
    add++;
    $("#number").val(add);
})

//給減號按鈕綁定事件
$("#subtract").on("click",function(){
    var subtract = $("#number").val();
    if(subtract > 0){
         subtract--;
    }
    $("#number").val(subtract);
})
複製代碼

而後用一張圖看看效果: )

自定義數字框.png

好了，剩下的就等遇到的時候再總結吧。 That's all !

©burning_韻七七

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程