溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么用純css實(shí)現(xiàn)input[type=file]的樣式控制

發(fā)布時(shí)間：2022-01-20 17:11:46 來(lái)源：億速云 閱讀：367 作者：iii 欄目：web開發(fā)

今天小編給大家分享一下怎么用純css實(shí)現(xiàn)input[type=file]的樣式控制的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

　　如果您搜索有關(guān)如何進(jìn)行完全外觀控制的常見(jiàn)問(wèn)題的解決方案，則結(jié)果可能適合以下3個(gè)類別之一：<inputtype="file"/>

　　需要Javascript。

　　在主瀏覽器中不起作用。

　　實(shí)際上并沒(méi)有提供完整的風(fēng)格控制。

　　上述三個(gè)肯定適合我在網(wǎng)上找到的每一個(gè)答案。但你可以用純CSS做到這一點(diǎn)。它需要一個(gè)包裝元素來(lái)掛鉤樣式（輸入本身是隱藏的，因?yàn)樗臉邮绞侨绱擞邢?限制）。語(yǔ)義上的概念可能想要把這個(gè)變成<label/>-順便說(shuō)一下，每個(gè)元素有多個(gè)標(biāo)簽沒(méi)有錯(cuò)的。我們看看從下面這個(gè)示例

　　代碼如下：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　 <title></title>

　　 <styletype="text/css">

　　.fileContainer{

　　overflow:hidden;

　　position:relative;

　　}

　　.fileContainer[type=file]{

　　cursor:inherit;

　　display:block;

　　font-size:999px;

　　filter:alpha(opacity=0);

　　min-height:100%;

　　min-width:100%;

　　opacity:0;

　　position:absolute;

　　right:0;

　　text-align:right;

　　top:0;

　　}

　　/*Examplestylisticflourishes*/

　　.fileContainer{

　　background:red;

　　border-radius:.5em;

　　float:left;

　　padding:.5em;

　　}

　　.fileContainer[type=file]{

　　cursor:pointer;

　　}

　　}

　　</style>

　　</head>

　　<body>

　　<labelclass="fileContainer">

　　點(diǎn)擊這里實(shí)現(xiàn)文件上傳!

　　<inputtype="file"/>

　　</label>

　　</body>

　　</html>

怎么用純css實(shí)現(xiàn)input[type=file]的樣式控制

以上就是“怎么用純css實(shí)現(xiàn)input[type=file]的樣式控制”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手