How can I change the default file Input button (choose file) to say instead "Add Photo", and also hide "no file chosen"? Here's the code I currently have in the plugin:
echo '<p style="clear: both"><input style="width: 100%;max-width: 240px;" type="file" name="image' . ($i==0?'':$i) . '"/> ' . htmlspecialchars($options['label']) . '</p>';
Thank you in advance!
You'll need to do this with CSS and the content property along with other properties to hide the default tag.
https://developer.mozilla.org/en-US/docs/Web/CSS/content
.button::-webkit-file-upload-button {
visibility: hidden;
}
.button::before {
content: 'Upload Image';
display: inline-block;
background: linear-gradient(top, #eee, #ccc);
border: 1px solid #aaa;
border-radius: 5px;
padding: 4px 7px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 2px 2px #fff;
font-weight: 700;
font-size: 10pt;
}
.button:hover::before {
border-color: black;
}
.button:active::before {
background: -webkit-linear-gradient(top, #eee, #ccc);
}<input type="file" class="button">Use the value attribute:
<input value="Add Photo" style="width: 100%;max-width: 240px;" type="file" name="image' . ($i==0?'':$i) . '"/>
