diff --git a/packages/components/src/components/pagination/_pagination.scss b/packages/components/src/components/pagination/_pagination.scss
index 6c11d19a16fe..67ba3a4c7386 100644
--- a/packages/components/src/components/pagination/_pagination.scss
+++ b/packages/components/src/components/pagination/_pagination.scss
@@ -84,6 +84,35 @@ $css--helpers: true;
     border-left: 1px solid $ui-03;
   }
 
+  .#{$prefix}--select__item-count,
+  .#{$prefix}--select__page-number {
+    position: relative;
+  }
+
+  // Note that `size="1"` is the default.
+  .#{$prefix}--select__item-count
+    .#{$prefix}--select-input:not([size='1']):focus,
+  .#{$prefix}--select__page-number
+    .#{$prefix}--select-input:not([size='1']):focus {
+    position: absolute;
+    height: auto;
+    background-color: $ui-01;
+
+    ~ svg {
+      @include hidden;
+    }
+  }
+
+  .#{$prefix}--select__item-count
+    .#{$prefix}--select-input:not([size='1']):focus {
+    left: 0;
+  }
+
+  .#{$prefix}--select__page-number
+    .#{$prefix}--select-input:not([size='1']):focus {
+    right: 0;
+  }
+
   .#{$prefix}--pagination__left,
   .#{$prefix}--pagination__right {
     display: flex;
diff --git a/packages/react/src/components/Pagination/Pagination-story.js b/packages/react/src/components/Pagination/Pagination-story.js
index 1f2b3d451480..06999165dd59 100644
--- a/packages/react/src/components/Pagination/Pagination-story.js
+++ b/packages/react/src/components/Pagination/Pagination-story.js
@@ -39,6 +39,14 @@ const props = () => ({
     'Items per page:'
   ),
   onChange: action('onChange'),
+  itemCountSelectSize: number(
+    'The `size` attribute of the "items per page" select element (itemCountSelectSize)',
+    1
+  ),
+  pageNumberSelectSize: number(
+    'The `size` attribute of the page number select element (pageNumberSelectSize)',
+    1
+  ),
 });
 
 storiesOf('Pagination', module)
diff --git a/packages/react/src/components/Pagination/Pagination.js b/packages/react/src/components/Pagination/Pagination.js
index a6fa6fba294d..6787ecab65e9 100644
--- a/packages/react/src/components/Pagination/Pagination.js
+++ b/packages/react/src/components/Pagination/Pagination.js
@@ -29,6 +29,8 @@ export default class Pagination extends Component {
       prevPageSizes: pageSizes,
       prevPage: page,
       prevPageSize: pageSize,
+      pageNumberSelectSize: 1,
+      itemCountSelectSize: 1,
     };
     this.uniqueId = ++instanceId;
   }
@@ -127,6 +129,16 @@ export default class Pagination extends Component {
      * `true` if the select box to change the page should be disabled.
      */
     pageInputDisabled: PropTypes.bool,
+
+    /**
+     * Optional prop to set the `size` attribute on the "items per page" select element.
+     */
+    itemCountSelectSize: PropTypes.number,
+
+    /**
+     * Optional prop to set the `size` attribute on the page number select element.
+     */
+    pageNumberSelectSize: PropTypes.number,
   };
 
   static defaultProps = {
@@ -143,6 +155,8 @@ export default class Pagination extends Component {
     pageInputDisabled: false,
     itemText: (min, max) => `${min}–${max} items`,
     pageText: page => `page ${page}`,
+    itemCountSelectSize: 1,
+    pageNumberSelectSize: 1,
   };
 
   static getDerivedStateFromProps({ pageSizes, page, pageSize }, state) {
@@ -236,6 +250,8 @@ export default class Pagination extends Component {
       totalItems,
       onChange, // eslint-disable-line no-unused-vars
       page: pageNumber, // eslint-disable-line no-unused-vars
+      itemCountSelectSize,
+      pageNumberSelectSize,
       ...other
     } = this.props;
 
@@ -290,6 +306,10 @@ export default class Pagination extends Component {
             noLabel
             inline
             onChange={this.handleSizeChange}
+            onBlur={() => this.setState({ itemCountSelectSize: 1 })}
+            onFocus={() => this.setState({ itemCountSelectSize })}
+            onMouseDown={() => this.setState({ itemCountSelectSize })}
+            size={this.state.itemCountSelectSize}
             value={statePageSize}>
             {pageSizes.map(size => (
               <SelectItem key={size} value={size} text={String(size)} />
@@ -317,6 +337,10 @@ export default class Pagination extends Component {
               inline
               hideLabel
               onChange={this.handlePageInputChange}
+              onBlur={() => this.setState({ pageNumberSelectSize: 1 })}
+              onFocus={() => this.setState({ pageNumberSelectSize })}
+              onMouseDown={() => this.setState({ pageNumberSelectSize })}
+              size={this.state.pageNumberSelectSize}
               value={statePage}>
               {selectItems}
             </Select>