antd-mobile/2x/es/components/number-keyboard/number-keyboard.css

<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*hjjDS5Yy-ooAAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />

.adm-number-keyboard-main {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

.adm-number-keyboard-main.confirmed-style .sign-key {
  background-color: var(--adm-color-white);
}

.adm-number-keyboard-popup.adm-popup {
  width: 100%;
  user-select: none;
  z-index: 1050;
}

.adm-number-keyboard-popup.adm-popup .adm-popup-body {
  background-color: #f5f5f5;
}

.adm-number-keyboard-wrapper {
  display: flex;
}

.adm-number-keyboard-header {
  height: 68px;
  line-height: 68px;
  border-top: solid 2px #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
  color: var(--adm-color-weak);
  background-color: var(--adm-color-white);
}

.adm-number-keyboard-header-close-button {
  padding: 0 24px;
  font-size: 32px;
}

.adm-number-keyboard-header.with-title {
  justify-content: space-between;
}

.adm-number-keyboard-header.with-title .adm-number-keyboard-header-close-button {
  padding-right: 0;
}

.adm-number-keyboard-footer {
  background: var(--adm-color-white);
}

.adm-number-keyboard-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm-number-keyboard-confirm {
  width: 25%;
}

.adm-number-keyboard-key {
  flex: 1 33.33%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  font-size: 44px;
  box-sizing: border-box;
  border: solid 2px #f5f5f5;
  border-bottom: none;
  border-left: none;
}

.adm-number-keyboard-key:nth-child(3n),
.adm-number-keyboard-key:last-child {
  border-right: none;
}

.adm-number-keyboard-key::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #000;
  border: inherit;
  border-color: #000;
  border-radius: inherit;
  transform: translate(-50%, -50%);
  opacity: 0;
  content: ' ';
  box-sizing: content-box;
}

.adm-number-keyboard-key.mid-key {
  flex-basis: 66.67%;
}

.adm-number-keyboard-key.sign-key:active::before {
  opacity: 0.1;
}

.adm-number-keyboard-key.extra-key {
  border-left: solid 2px #f5f5f5;
  border-right: none;
}

.adm-number-keyboard-key.extra-key,
.adm-number-keyboard-key.number-key {
  background-color: var(--adm-color-white);
}

.adm-number-keyboard-key.extra-key:active::before,
.adm-number-keyboard-key.number-key:active::before {
  opacity: 0.1;
}

.adm-number-keyboard-key.ok-key {
  background-color: var(--adm-color-primary);
  color: var(--adm-color-white);
  height: 288px;
  font-size: 32px;
  border: none;
}

.adm-number-keyboard-bs-key {
  height: 40px;
}