Apply of #25068 to input group

diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md
index 3d866d95500b549311ff7a947d7cf0c7b2de3995..cd5d5bdfde06376ae6f75ab2e56bbba99e9985ff 100644 (file)
--- a/docs/4.0/components/input-group.md
+++ b/docs/4.0/components/input-group.md
@@ -300,17 +300,17 @@ Input groups include support for custom selects and custom file inputs. Browser
   <div class="input-group-prepend">
     <span class="input-group-text">Upload</span>
   </div>
-  <label class="custom-file">
-    <input type="file" id="inputGroupFile01" class="custom-file-input" required>
-    <span class="custom-file-control"></span>
-  </label>
+  <div class="custom-file">
+    <input type="file" class="custom-file-input" id="inputGroupFile01">
+    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
+  </div>
 </div>
 
 <div class="input-group mb-3">
-  <label class="custom-file">
-    <input type="file" id="inputGroupFile02" class="custom-file-input" required>
-    <span class="custom-file-control"></span>
-  </label>
+  <div class="custom-file">
+    <input type="file" class="custom-file-input" id="inputGroupFile02">
+    <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
+  </div>
   <div class="input-group-append">
     <span class="input-group-text" id="">Upload</span>
   </div>
@@ -320,17 +320,17 @@ Input groups include support for custom selects and custom file inputs. Browser
   <div class="input-group-prepend">
     <button class="btn btn-outline-secondary" type="button">Button</button>
   </div>
-  <label class="custom-file">
-    <input type="file" id="inputGroupFile03" class="custom-file-input" required>
-    <span class="custom-file-control"></span>
-  </label>
+  <div class="custom-file">
+    <input type="file" class="custom-file-input" id="inputGroupFile03">
+    <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
+  </div>
 </div>
 
 <div class="input-group">
-  <label class="custom-file">
-    <input type="file" id="inputGroupFile04" class="custom-file-input" required>
-    <span class="custom-file-control"></span>
-  </label>
+  <div class="custom-file">
+    <input type="file" class="custom-file-input" id="inputGroupFile04">
+    <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
+  </div>
   <div class="input-group-append">
     <button class="btn btn-outline-secondary" type="button">Button</button>
   </div>

diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index 7ef0267cc38691d832d57eafee881e9336834986..df950fb5cb34899d4ba770b6d03f84926ca0159f 100644 (file)
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -43,10 +43,10 @@
     display: flex;
     align-items: center;
 
-    &:not(:last-child) .custom-file-control,
-    &:not(:last-child) .custom-file-control::before { @include border-right-radius(0); }
-    &:not(:first-child) .custom-file-control,
-    &:not(:first-child) .custom-file-control::before { @include border-left-radius(0); }
+    &:not(:last-child) .custom-file-label,
+    &:not(:last-child) .custom-file-label::before { @include border-right-radius(0); }
+    &:not(:first-child) .custom-file-label,
+    &:not(:first-child) .custom-file-label::before { @include border-left-radius(0); }
   }
 }