diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
index f8dfa8b63..f387b1665 100644
--- a/src/lib/viewers/doc/_docBase.scss
+++ b/src/lib/viewers/doc/_docBase.scss
@@ -92,6 +92,13 @@
         }
     }
 
+    .bp-doc-page-num-wrapper {
+        background-color: #444;
+        border-radius: 3px;
+        margin: 5px;
+        padding: 7px 5px;
+    }
+
     .bp-doc-page-num-input {
         display: none;
         font-size: 14px;
@@ -101,6 +108,12 @@
     }
 
     &.show-page-number-input {
+        .bp-doc-page-num-wrapper {
+            background-color: transparent;
+            border: none;
+            padding: 0;
+        }
+
         .bp-doc-page-num {
             opacity: 1;
         }
diff --git a/src/lib/viewers/doc/pageNumButtonContent.html b/src/lib/viewers/doc/pageNumButtonContent.html
index 7b7d0d863..95d487427 100644
--- a/src/lib/viewers/doc/pageNumButtonContent.html
+++ b/src/lib/viewers/doc/pageNumButtonContent.html
@@ -1,4 +1,6 @@
-<span class="bp-doc-current-page">1</span>
-<input type="text" value="" size="3" class="bp-doc-page-num-input">
-<span class="bp-doc-page-num-divider">&nbsp;/&nbsp;</span>
-<span class="bp-doc-total-pages">1</span>
+<div class="bp-doc-page-num-wrapper">
+    <span class="bp-doc-current-page">1</span>
+    <input type="text" value="" size="3" class="bp-doc-page-num-input" />
+    <span class="bp-doc-page-num-divider">&nbsp;/&nbsp;</span>
+    <span class="bp-doc-total-pages">1</span>
+</div>