Styling <input type="file">, cropped box-shadow and outline - css

Question

I want my <input type="file" /> button to look like all my other buttons.
Now, it's easy with all browsers thanks to :
::file-selector-button (Firefox)
::-webkit-file-upload-button
::-ms-browse
This is what this input looks like in ShadowDOM :
<input type="file">
<button tabindex="-1">
<label>No file selected</label>
</input>
So, the button is within the input box so everything that's outsize this box is cropped (box-shadow and outline).
Do you have an idea to avoid this crop ?
I mean, I can add padding to the input but I have to calculate the border-radius spread, outline offset, correct padding with negative margins, etc.
I'm looking for something more flexible.
EDIT : overflow:visible on the input is not working. I don't know why
EDIT 2 : This is the default styling from resource://gre-ressource/forms.css (Firefox)
input[type=file] {
white-space: nowrap !important;
overflow: hidden !important;
overflow-clip-box: padding-box;
color: unset;
/* Revert rules which apply on all inputs. */
appearance: none;
-moz-default-appearance: none;
cursor: default;
border: none;
background-color: transparent;
padding: unset;
}
This explains why overflow:visible doesn't work. Also, playing with overflow-clip-box doesn't changes anything. It is set in forms.css however specifications say this property is not implemented in Firefox. Plus, there is a bug associated
EDIT 3 : Defining overflow: visible !important seems to override user agent styling, and it cancels overflow-clip-box: padding-box; as well but the overflowing content is still not visible.
Any workaround idea ?
:root {
--base-color: purple;
--file-border: 2px solid var(--base-color);
--file-border-radius: 5px;
--file-background: gold;
--file-box-shadow: 2px 2px 3px 0 #888;
--file-outline: 2px dadshed blue;
}
::file-selector-button {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
::-webkit-file-upload-button {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
::-ms-browse {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
[type=file]:focus::file-selector-button{
outline: var(--file-outline);
outline-offset: 2px;
}
[type=file]:focus::-webkit-file-upload-button {
outline: var(--file-outline);
outline-offset: 2px;
}
[type=file]:focus::-ms-browse {
outline: var(--file-outline);
outline-offset: 2px;
}
Cropped box-shadow and outline (on focus) :
<p>
<input type="file" />
</p>
With padding :
<p>
<input type="file" style="padding: 5px"/>
</p>
With padding + correction :
<p>
<input type="file" style="padding: 5px;margin-left:-5px;margin-top:-5px"/>
</p>

Answer 1

It's not possible in Chrome and Firefox.
That's because user agent stylesheets from the rendering engines of these browsers (Blink and Gecko) declare overflow: hidden !important; inside the selector input[type=file]. Unfortunately, they can't be overrided due to CSS cascading order.
The !important rule in UA stylesheets will bypass even a JS solution (I tried).

Answer 2

I mean, I can add padding to the input but I have to calculate the border-radius spread, outline offset, correct padding with negative margins, etc.
You don't have to do the calculations, just use padding-bottom directly instead of setting padding on all sides.
Edit: You can also make another custom variable to control the padding in one place. Since you have no issue setting the shadow as custom property as well. See the snippet below:
:root {
--base-color: purple;
--file-border: 2px solid var(--base-color);
--file-border-radius: 5px;
--file-background: gold;
--file-box-shadow: 2px 2px 3px 0 #888;
--file-outline: 2px dashed blue;
--file-padding: 0 0 5px 0;
}
::file-selector-button {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
::-webkit-file-upload-button {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
::-ms-browse {
color: var(--base-color);
border-radius: var(--file-border-radius);
background-color: var(--file-background);
border: var(--file-border);
box-shadow: var(--file-box-shadow);
}
[type=file]:focus::file-selector-button {
outline: var(--file-outline);
outline-offset: 2px;
}
[type=file]:focus::-webkit-file-upload-button {
outline: var(--file-outline);
outline-offset: 2px;
}
[type=file]:focus::-ms-browse {
outline: var(--file-outline);
outline-offset: 2px;
}
input{
padding: var(--file-padding);
}
<p>
<input type="file" />
</p>