css input file 美化

張漢慶發(fā)布于2019-08-02 16:10 / 648人閱讀

摘要：代碼代碼組撐滿父容器，透明度設(shè)置為，就可以隨意設(shè)置父元素樣式了。

html代碼

css 代碼

.file-container {
    position: relative;
    width: 7rem;
    height: 6rem;
    background: url("../common/images/ui/組1.png") center center no-repeat;
    background-size: 100%;
}
.file-container input {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    opacity: 0;
}

input 撐滿父容器，透明度設(shè)置為0，就可以隨意設(shè)置父元素樣式了。
效果：

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

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

相關(guān)文章

css input file 美化

摘要：代碼代碼組撐滿父容器，透明度設(shè)置為，就可以隨意設(shè)置父元素樣式了。 html代碼 css 代碼 .file-container { position: relative; width: 7rem; height: 6rem; background: url(../common/images/ui/組1.png) center center ...

fevin 2019-08-30 15:43 評(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 2019-08-29 13:14 評(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 2019-08-26 14:01 評(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 2019-08-30 15:44 評(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)過程中卻遇到了很多坑，在這里總結(jié)一下，讓碰到此問題的朋友也可以有更多選擇，以下所述純屬個(gè)人觀點(diǎn)，如有不同的方法，歡迎在評(píng)論區(qū)留言交流，共同進(jìn)步！???...

paraller 2019-08-22 17:03 評(píng)論0 收藏0