<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Green File Button Example</title>
<style>
body {
font-family: sans-serif;
padding: 40px;
}
input[type="file"]::file-selector-button {
background-color: green; /* Green background */
color: white; /* White text */
border: none; /* Remove default border */
padding: 8px 12px; /* Space inside the button */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Pointer cursor */
font-size: 14px; /* Adjust font size */
}
input[type="file"]::file-selector-button:hover {
background-color: darkgreen; /* Slightly darker on hover */
}
#output {
margin-top: 20px;
font-style: italic;
}
</style>
</head>
<body>
<h1>Select a File</h1>
<input type="file" id="fileInput">
<div id="output"></div>
<script>
const fileInput = document.getElementById('fileInput');
const output = document.getElementById('output');
fileInput.addEventListener('change', function () {
const file = fileInput.files[0];
if (file) {
output.textContent = `You selected: ${file.name} (${Math.round(file.size / 1024)} KB)`;
} else {
output.textContent = 'No file selected.';
}
});
</script>
</body>
</html>