From 66310920d1ebb004d08f1e183feb9febe6b6d7f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= Date: Tue, 3 Nov 2020 21:47:04 +0000 Subject: [PATCH] Bug 1673895 - Allow customizing the spacing between the button and the label of a file input. r=TYLin This should have no behavior changes, but allows authors to customize the amount of spacing between the label and the button of a file control by applying it as margin of the file selector pseudo rather than as padding of the label. Differential Revision: https://phabricator.services.mozilla.com/D95620 --- layout/style/res/forms.css | 2 +- .../tests/css/file-selector-button-margin-notref.html | 2 ++ .../mozilla/tests/css/file-selector-button-margin.html | 10 ++++++++++ 3 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 testing/web-platform/mozilla/tests/css/file-selector-button-margin-notref.html create mode 100644 testing/web-platform/mozilla/tests/css/file-selector-button-margin.html diff --git a/layout/style/res/forms.css b/layout/style/res/forms.css index 70ff25440a30..8a1f09a4a31d 100644 --- a/layout/style/res/forms.css +++ b/layout/style/res/forms.css @@ -676,7 +676,6 @@ input[type="file"] { input[type="file"] > label { display: inline-block; min-inline-size: 12em; - padding-inline-start: 5px; text-align: match-parent; color: unset; @@ -692,6 +691,7 @@ input[type="file"] > label { font-size: unset; letter-spacing: unset; cursor: unset; + margin-inline-end: 5px; } /* diff --git a/testing/web-platform/mozilla/tests/css/file-selector-button-margin-notref.html b/testing/web-platform/mozilla/tests/css/file-selector-button-margin-notref.html new file mode 100644 index 000000000000..67fc0af38993 --- /dev/null +++ b/testing/web-platform/mozilla/tests/css/file-selector-button-margin-notref.html @@ -0,0 +1,2 @@ + + diff --git a/testing/web-platform/mozilla/tests/css/file-selector-button-margin.html b/testing/web-platform/mozilla/tests/css/file-selector-button-margin.html new file mode 100644 index 000000000000..f2f4e87d9338 --- /dev/null +++ b/testing/web-platform/mozilla/tests/css/file-selector-button-margin.html @@ -0,0 +1,10 @@ + +CSS Test: margin can be used to shrink the spacing betwee the file selector button and its label + + + +