css input file 美化

fevin 發(fā)布于2019-08-30 15:43 / 489人閱讀

摘要：代碼代碼組撐滿父容器，透明度設(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116044.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 ...

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

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

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

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

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

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

jackzou 2019-08-30 15:44 評論0 收藏0
關(guān)于文件上傳按鈕樣式美化的一些總結(jié)

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

paraller 2019-08-22 17:03 評論0 收藏0