CSS點擊圖片上傳樣式實現起來非常簡單,只需要利用CSS的偽類選擇器,就可以輕松實現。下面就來介紹一下實現的具體方法。
/* 以下是HTML代碼 */ <input type="file" id="file" /> <label for="file" id="upload-label"> <img src="default-image.jpg" alt="上傳圖片" /> </label> /* 以下是CSS代碼 */ #upload-label { display: inline-block; cursor: pointer; } #upload-label img { width: 150px; height: 150px; } #file { display: none; } #file:checked + #upload-label img { border: 2px solid #000; box-shadow: 0 0 5px rgba(0,0,0,0.3); }
以上CSS代碼簡單解釋一下:
- display: inline-block;和cursor: pointer;用于將label標簽的樣式改為圖像按鈕的樣式。
- width和height用于限制圖像按鈕的尺寸。
- display: none;用于隱藏原始的文件上傳控件。
- 當選擇了文件上傳控件時,利用:checked偽類選擇器找到被選中的文件上傳控件,并使用+將其后面的#upload-label img元素選擇出來,然后添加樣式。
使用以上代碼,就可以輕松實現一個點擊圖片上傳的樣式啦!
下一篇css點擊后改變div