เราสามารถจัดรูปแบบปุ่มอัพโหลดไฟล์โดยใช้ CSS pseudo element ::file-selector-button อย่างไรก็ตาม การสนับสนุนอย่างเต็มที่ขององค์ประกอบหลอกนี้จำกัดเฉพาะ Firefox และ Firefox Android
::-webkit-file-upload-button ใช้เพื่อรองรับ Safari, Chrome และ Opera
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ CSS file-selector มีดังนี้ -
Selector::file-selector-button {
attribute: /*value*/
}
Selector::-webkit-file-upload-button {
attribute: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดง CSS file-selector-button selector
<!DOCTYPE html>
<html>
<head>
<style>
input[type=file]::file-selector-button:hover {
cursor: grab;
background-color: blueviolet;
color: white;
font-size: 1.2em;
box-shadow: inset 5px 10px 10px cornflowerblue;
}
</style>
</head>
<body>
<form>
<label for="fup">Click to</label>
<input type="file" id="fup" />
<input type="text" placeholder="Random Text here" />
<button type="submit">Done</button>
</form>
</body>
</html> ซึ่งจะให้ผลลัพธ์ต่อไปนี้ในเว็บเบราว์เซอร์ Firefox
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
input[type=file]::file-selector-button:hover {
cursor: pointer;
background-color: crimson;
font-size: 1.2em;
border-radius: 25%;
box-shadow: inset 5px 10px 10px cornsilk;
}
input[type=file]::-webkit-file-upload-button:hover {
cursor: pointer;
background-color: crimson;
font-size: 1.2em;
border-radius: 25%;
box-shadow: inset 5px 10px 10px cornsilk;
}
</style>
</head>
<body>
<form>
<label for="fup">Click to</label>
<input type="file" id="fup" />
<input type="text" placeholder="using webkit prefix" />
<button type="submit">Done</button>
</form>
</body>
</html> ซึ่งจะให้ผลลัพธ์ต่อไปนี้ใน Google Chrome
