關于文件上傳按鈕樣式美化的一些總結

paraller 發布于2019-08-22 17:03 / 1270人閱讀

摘要：第二種不推薦的理由局限性限制了元素，只能使用，且只能使用來進行關聯，作為唯一標識，頁面上定義的越少越好，想要在同一頁面使用多個就需要定義多個。

?????最近在公司做項目遇到個需求，就是要做一個上傳圖片的功能，很簡單的一個功能，但是在實現過程中卻遇到了很多坑，在這里總結一下，讓碰到此問題的朋友也可以有更多選擇，以下所述純屬個人觀點，如有不同的方法，歡迎在評論區留言交流，共同進步！
???????剛開始我的想法是直接用定位（position）+透明度（opacity）直接來實現，實現的過程很順利，但是最后卻發現了一個問題，什么問題呢，很簡單，就是用戶體驗的問題，我想給這個按鈕加一個鼠標移入變手的效果，卻發現始終有一部分不會生效，檢查代碼發現原來是因為上傳文件的按鈕不會應用這個樣式，那我我就想把他移出到按鈕之外的位置，但是這樣就會出現按鈕超寬的問題，即使在看不見的部位也能點到，所以我就這個問題開始了一些實驗，在網上也找過方法，發現都不是我想要的，最后決定自己來寫一寫，不研究不知道，一研究還發現了不少方法能實現，我總結除了三種實現的方法以及實現思路，希望對大家有幫助，如果還有其他的方法，請在評論區留言，共同學習，好了廢話不多說，貼代碼：




    第一種方法
    
    


/*css代碼*/
/*第一種的按鈕樣式*/
.first{
    position: relative;
    height: 30px;
    line-height: 30px;
}
.first button,.first input{
    position: absolute;
    left: 85px;
    top: 0;
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: skyblue;
    border-radius: 5px;
    border: none;
    outline: none;
    cursor: pointer;
}
.first input{
    opacity: 0;
    width: 185px;
    left: 0;/*這里是為了讓cursor效果在按鈕內完全生效，但是弊端就是寬度增加，在按鈕左側看不見的位置也能點擊到*/
}




    第二種方法
    上傳圖片
    


/*css代碼*/
/*第二種的按鈕樣式*/
.item label{
    display: inline-block;
    width: 100px;
    height: 30px;
    text-align: center;
    color: #fff;
    line-height: 30px;
    background-color: skyblue;
    border-radius: 5px;
    cursor: pointer;
}
.item input{
    display: none;
}




    第三種方法
    
    


/*css代碼*/
/*第三種的按鈕樣式*/
.item button{
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: skyblue;
    border-radius: 5px;
    border: none;
    outline: none;
    cursor: pointer;
}
.item input{
    display: none;
}

// js代碼
// 第三種方法
document.querySelector(".btn").addEventListener("click",function () {
    document.querySelector("#file").click();
});

上面三種方法的樣式都是一樣的，如圖：

總結上述三種方法比較推薦第三種，第一種不推薦的理由：

???????一、樣式代碼相對較多，并且對于cursor，file的按鈕不會應用樣式，所以需要讓他寬度更寬才行，這樣就會出現在不可見區域也能點擊上傳的bug（目前沒找到解決辦法）。

???????二、結構固定。

???????三、需要使用定位。

第二種不推薦的理由：

???????局限性：限制了元素，只能使用label，且只能使用id來進行關聯，id作為唯一標識，頁面上定義的id越少越好，想要在同一頁面使用多個就需要定義多個id。

第三種推薦的理由：

???????一、結構：樣式簡單，結構清晰

???????二、適用范圍：不限制元素的使用，因為是用js動態綁定的當然，上面的純屬個人觀點，如果有更好的觀點歡迎在評論區留言討論~

GPU云服務器云服務器 vps日常維護中的一些要點總結關于樣式的美化按鈕關于文件的讀寫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94801.html

關于文件上傳按鈕樣式美化的一些總結

摘要：第二種不推薦的理由局限性限制了元素，只能使用，且只能使用來進行關聯，作為唯一標識，頁面上定義的越少越好，想要在同一頁面使用多個就需要定義多個。 ?????最近在公司做項目遇到個需求，就是要做一個上傳圖片的功能，很簡單的一個功能，但是在實現過程中卻遇到了很多坑，在這里總結一下，讓碰到此問題的朋友也可以有更多選擇，以下所述純屬個人觀點，如有不同的方法，歡迎在評論區留言交流，共同進步！???...

EsgynChina 2019-08-29 15:19 評論0 收藏0
關于文件上傳按鈕樣式美化的一些總結

摘要：第二種不推薦的理由局限性限制了元素，只能使用，且只能使用來進行關聯，作為唯一標識，頁面上定義的越少越好，想要在同一頁面使用多個就需要定義多個。 ?????最近在公司做項目遇到個需求，就是要做一個上傳圖片的功能，很簡單的一個功能，但是在實現過程中卻遇到了很多坑，在這里總結一下，讓碰到此問題的朋友也可以有更多選擇，以下所述純屬個人觀點，如有不同的方法，歡迎在評論區留言交流，共同進步！???...

Warren 2019-08-02 10:23 評論0 收藏0
CSS美化上傳按鈕、checkbox和radio樣式

摘要：思路美化思路是，先把之前的按鈕透明度設置為然后，外層用包裹，就實現了美化功能。上傳按鈕美化代碼如下樣式一樣式二點擊這里上傳文件選擇文件結果樣式一樣式二美化代碼如下背景圖片樣式結果美化代碼如下背景圖片樣式結果思路：美化思路是，先把之前的按鈕透明度opacity設置為0,然后，外層用div包裹，就實現了美化功能。 input[type=file]上傳按鈕美化代碼如下：樣式一： /*...

gghyoo 2019-08-29 13:14 評論0 收藏0
美化文件上傳按鈕自定義input file樣式

摘要：的樣式不能直接用來美化，我們可以曲線救國，把的透明度降低為，相當于把這個控件隱藏了，實際上只是透明度為，還是存在的，然后把套上去，讓充當的按鈕。 input file的樣式不能直接用css來美化，我們可以曲線救國，把input file的透明度降低為0，相當于把這個控件隱藏了，實際上只是透明度為0，還是存在的，然后把div套上去，讓div充當file的按鈕。 showImg(https...

jkyin 2019-08-26 14:01 評論0 收藏0
美化文件上傳按鈕自定義input file樣式

摘要：的樣式不能直接用來美化，我們可以曲線救國，把的透明度降低為，相當于把這個控件隱藏了，實際上只是透明度為，還是存在的，然后把套上去，讓充當的按鈕。 input file的樣式不能直接用css來美化，我們可以曲線救國，把input file的透明度降低為0，相當于把這個控件隱藏了，實際上只是透明度為0，還是存在的，然后把div套上去，讓div充當file的按鈕。 showImg(https...

jackzou 2019-08-30 15:44 評論0 收藏0