国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

關(guān)于文件上傳按鈕樣式美化的一些總結(jié)

EsgynChina / 1655人閱讀

摘要：第二種不推薦的理由局限性限制了元素，只能使用，且只能使用來(lái)進(jìn)行關(guān)聯(lián)，作為唯一標(biāo)識(shí)，頁(yè)面上定義的越少越好，想要在同一頁(yè)面使用多個(gè)就需要定義多個(gè)。

?????最近在公司做項(xiàng)目遇到個(gè)需求，就是要做一個(gè)上傳圖片的功能，很簡(jiǎn)單的一個(gè)功能，但是在實(shí)現(xiàn)過(guò)程中卻遇到了很多坑，在這里總結(jié)一下，讓碰到此問(wèn)題的朋友也可以有更多選擇，以下所述純屬個(gè)人觀點(diǎn)，如有不同的方法，歡迎在評(píng)論區(qū)留言交流，共同進(jìn)步！
???????剛開(kāi)始我的想法是直接用定位（position）+透明度（opacity）直接來(lái)實(shí)現(xiàn)，實(shí)現(xiàn)的過(guò)程很順利，但是最后卻發(fā)現(xiàn)了一個(gè)問(wèn)題，什么問(wèn)題呢，很簡(jiǎn)單，就是用戶體驗(yàn)的問(wèn)題，我想給這個(gè)按鈕加一個(gè)鼠標(biāo)移入變手的效果，卻發(fā)現(xiàn)始終有一部分不會(huì)生效，檢查代碼發(fā)現(xiàn)原來(lái)是因?yàn)樯蟼魑募陌粹o不會(huì)應(yīng)用這個(gè)樣式，那我我就想把他移出到按鈕之外的位置，但是這樣就會(huì)出現(xiàn)按鈕超寬的問(wèn)題，即使在看不見(jiàn)的部位也能點(diǎn)到，所以我就這個(gè)問(wèn)題開(kāi)始了一些實(shí)驗(yàn)，在網(wǎng)上也找過(guò)方法，發(fā)現(xiàn)都不是我想要的，最后決定自己來(lái)寫(xiě)一寫(xiě)，不研究不知道，一研究還發(fā)現(xiàn)了不少方法能實(shí)現(xiàn)，我總結(jié)除了三種實(shí)現(xiàn)的方法以及實(shí)現(xiàn)思路，希望對(duì)大家有幫助，如果還有其他的方法，請(qǐng)?jiān)谠u(píng)論區(qū)留言，共同學(xué)習(xí)，好了廢話不多說(shuō)，貼代碼：





    第一種方法
    
    



/*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效果在按鈕內(nèi)完全生效，但是弊端就是寬度增加，在按鈕左側(cè)看不見(jiàn)的位置也能點(diǎn)擊到*/
}




    第二種方法
    
    



/*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();
});

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

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

???????一、樣式代碼相對(duì)較多，并且對(duì)于cursor，file的按鈕不會(huì)應(yīng)用樣式，所以需要讓他寬度更寬才行，這樣就會(huì)出現(xiàn)在不可見(jiàn)區(qū)域也能點(diǎn)擊上傳的bug（目前沒(méi)找到解決辦法）。

???????二、結(jié)構(gòu)固定。

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

第二種不推薦的理由：

???????局限性：限制了元素，只能使用label，且只能使用id來(lái)進(jìn)行關(guān)聯(lián)，id作為唯一標(biāo)識(shí)，頁(yè)面上定義的id越少越好，想要在同一頁(yè)面使用多個(gè)就需要定義多個(gè)id。

第三種推薦的理由：

???????一、結(jié)構(gòu)：樣式簡(jiǎn)單，結(jié)構(gòu)清晰

???????二、適用范圍：不限制元素的使用，因?yàn)槭怯胘s動(dòng)態(tài)綁定的當(dāng)然，上面的純屬個(gè)人觀點(diǎn)，如果有更好的觀點(diǎn)歡迎在評(píng)論區(qū)留言討論~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/113237.html

相關(guān)文章

  • 關(guān)于文件上傳按鈕樣式美化的一些總結(jié)

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

    paraller 評(píng)論0 收藏0

  • 關(guān)于文件上傳按鈕樣式美化的一些總結(jié)

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

    Warren 評(píng)論0 收藏0

  • CSS美化上傳按鈕、checkbox和radio樣式

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

    gghyoo 評(píng)論0 收藏0

  • 美化文件上傳按鈕自定義input file樣式

    摘要：的樣式不能直接用來(lái)美化，我們可以曲線救國(guó)，把的透明度降低為，相當(dāng)于把這個(gè)控件隱藏了，實(shí)際上只是透明度為，還是存在的，然后把套上去，讓充當(dāng)?shù)陌粹o。 input file的樣式不能直接用css來(lái)美化，我們可以曲線救國(guó)，把input file的透明度降低為0，相當(dāng)于把這個(gè)控件隱藏了，實(shí)際上只是透明度為0，還是存在的，然后把div套上去，讓div充當(dāng)file的按鈕。 showImg(https...

    jkyin 評(píng)論0 收藏0

  • 美化文件上傳按鈕自定義input file樣式

    摘要：的樣式不能直接用來(lái)美化，我們可以曲線救國(guó)，把的透明度降低為，相當(dāng)于把這個(gè)控件隱藏了，實(shí)際上只是透明度為，還是存在的，然后把套上去，讓充當(dāng)?shù)陌粹o。 input file的樣式不能直接用css來(lái)美化，我們可以曲線救國(guó)，把input file的透明度降低為0，相當(dāng)于把這個(gè)控件隱藏了，實(shí)際上只是透明度為0，還是存在的，然后把div套上去，讓div充當(dāng)file的按鈕。 showImg(https...

    jackzou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<