Chúng ta có thể tạo kiểu cho nút tải tệp lên bằng cách sử dụng phần tử giả CSS ::tệp-bộ chọn-nút. Tuy nhiên, sự hỗ trợ đầy đủ của phần tử giả này chỉ giới hạn ở Firefox và Firefox Android.
::- webkit-file-upload-button được sử dụng để hỗ trợ Safari, Chrome và Opera.
Cú pháp
Cú pháp của thuộc tính trình chọn tệp CSS như sau -
Selector::file-selector-button {
attribute: /*value*/
}
Selector::-webkit-file-upload-button {
attribute: /*value*/
} Ví dụ
Các ví dụ sau minh họa bộ chọn nút-bộ chọn tệp CSS.
<!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> Điều này cho kết quả sau trong trình duyệt web Firefox.
Ví dụ
<!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> Điều này cho kết quả sau trong Google Chrome.
