Using JavaScript, I have added two buttons to the left of the filter box:
This is the HTML code for the buttons:
Here is the CSS style for the buttonfile:
.buttonfile {
text-indent: 0;
float: left;
display: block;
margin-right: 16px;
margin-top: 8px;
background-color: #f9f9f9;
border: 1px solid #eee;
height: 25px;
cursor: pointer;
}
These buttons appear correctly on Chrome and Edge, but not on Firefox (v115.0.2 latest). In Firefox, they are displayed differently:
Despite trying various adjustments to the buttonfile style, I could not get it to render properly in Firefox. As a workaround, I used this specific hack for Firefox:
@-moz-document url-prefix() {.buttonfile{ display:none; } }
Any suggestions on how to make the Firefox rendering match the other browsers?
For reference, here are the styles applied to the filter box: