Created by: ysds
Please see https://github.com/twbs/bootstrap/pull/28511#issuecomment-474381351.
By changing the markup of custom file, remove the way of translating button labels by CSS, and support a long file name. Now, you can change the button label by HTML.
And for fix #28389 (closed), move the border to the each children of the .custom-file-label
. Another way by overflow: hidden
is suddested (https://github.com/twbs/bootstrap/pull/28388#issuecomment-468898020), but it does not round the inside of the corner.
I also added the transition
to .custom-file-text
and .custom-file-button
for focused border color animation.
Closes #25497 (closed) Closes #26933 (closed) Closes #28388 Closes #28389 (closed)
Preview: https://deploy-preview-28696--twbs-bootstrap.netlify.com/docs/4.3/components/forms/#file-browser