antd-mobile/es/input-item/style/index.css

基于 React 的移动设计规范实现

.hairline-remove-right-bottom {
  border-bottom: 0;
}
.hairline-remove-right-bottom:after {
  display: none;
}
.hairline-remove-right-bottom-bak:after {
  display: none;
}
.hairline-remove-left-top:before {
  display: none;
}
.am-list-item .am-input-control {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.am-list-item .am-input-control .fake-input-container {
  height: 60px;
  line-height: 60px;
  position: relative;
}
.am-list-item .am-input-control .fake-input-container .fake-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-right: 10px;
  text-decoration: rtl;
  text-align: right;
  color: #000;
  font-size: 34px;
}
.am-list-item .am-input-control .fake-input-container .fake-input.fake-input-disabled {
  color: #bbb;
}
.am-list-item .am-input-control .fake-input-container .fake-input.focus {
  transition: color .2s;
}
.am-list-item .am-input-control .fake-input-container .fake-input.focus:after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  border-right: 3px solid #108ee9;
  -webkit-animation: keyboard-cursor infinite 1s step-start;
          animation: keyboard-cursor infinite 1s step-start;
}
.am-list-item .am-input-control .fake-input-container .fake-input-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #bbb;
  text-align: right;
}
.am-number-keyboard-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 400px;
  z-index: 10000;
  font-family: 'PingFang SC';
  background-color: #f6f6f7;
  transition-duration: 0.2s;
  transition-property: -webkit-transform display;
  transition-property: transform display;
  transition-property: transform display, -webkit-transform display;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.am-number-keyboard-wrapper.am-number-keyboard-wrapper-hide {
  bottom: -1000px;
}
.am-number-keyboard-wrapper table {
  width: 100%;
  padding: 0;
  margin: 0;
  border-collapse: collapse;
  border-top: 1Px solid #ccc;
}
.am-number-keyboard-wrapper table tr {
  width: 100%;
  padding: 0;
  margin: 0;
}
.am-number-keyboard-wrapper table tr .am-number-keyboard-item {
  width: 25%;
  padding: 0;
  margin: 0;
  height: 100px;
  text-align: center;
  border-left: 1Px solid #ccc;
  border-bottom: 1Px solid #ccc;
  font-size: 51px;
  color: #2a2b2c;
  position: relative;
}
.am-number-keyboard-wrapper table tr .am-number-keyboard-item.am-number-keyboard-item-active {
  background-color: #ddd;
}
.am-number-keyboard-wrapper table tr .am-number-keyboard-item.keyboard-confirm {
  color: #fff;
  font-size: 42px;
  background-color: #108ee9;
}
.am-number-keyboard-wrapper table tr .am-number-keyboard-item.keyboard-confirm.am-number-keyboard-item-active {
  background-color: #1284d6;
}
.am-number-keyboard-wrapper table tr .am-number-keyboard-item.keyboard-confirm.am-number-keyboard-item-disabled {
  background-color: #1284d6;
  color: rgba(255, 255, 255, 0.45);
}
.am-number-keyboard-wrapper table tr .am-number-keyboard-item.keyboard-delete {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22204%22%20height%3D%22148%22%20viewBox%3D%220%200%20153.000000%20111.000000%22%3E%3Cpath%20d%3D%22M46.9%204.7c-2.5%202.6-14.1%2015.5-25.8%2028.6L-.1%2057l25.6%2027%2025.7%2027.1%2047.4-.3%2047.4-.3%203.2-3.3%203.3-3.2V7l-3.3-3.2L146%20.5%2098.7.2%2051.5-.1l-4.6%204.8zm97.9%203.5c1.7%201.7%201.7%2092.9%200%2094.6-.9.9-12.6%201.2-46.3%201.2H53.4L31.2%2080.4%209%2056.9l5.1-5.7c2.8-3.1%2012.8-14.4%2022.2-24.9L53.5%207h45c33.8%200%2045.4.3%2046.3%201.2z%22%2F%3E%3Cpath%20d%3D%22M69.5%2031c-1.9%202.1-1.7%202.2%209.3%2013.3L90%2055.5%2078.8%2066.7%2067.5%2078l2.3%202.2%202.2%202.3%2011.3-11.3L94.5%2060l11.2%2011.2L117%2082.5l2.2-2.3%202.3-2.2-11.3-11.3L99%2055.5l11.2-11.2L121.5%2033l-2.3-2.2-2.2-2.3-11.3%2011.3L94.5%2051l-11-11c-6-6-11.2-11-11.6-11-.3%200-1.4.9-2.4%202z%22%2F%3E%3C%2Fsvg%3E");
  background-size: 51px 37px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.am-number-keyboard-wrapper table tr .am-number-keyboard-item.keyboard-hide {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22188%22%20viewBox%3D%220%200%20195.000000%20141.000000%22%3E%3Cpath%20d%3D%22M0%2057v57h195V0H0v57zm183%200v45H12V12h171v45z%22%2F%3E%3Cpath%20d%3D%22M21%2031.5V39h15V24H21v7.5zM48%2031.5V39h15V24H48v7.5zM75%2031.5V39h15V24H75v7.5zM102%2031.5V39h15V24h-15v7.5zM129%2031.5V39h15V24h-15v7.5zM156%2031.5V39h15V24h-15v7.5zM36%2055.5V63h15V48H36v7.5zM63%2055.5V63h15V48H63v7.5zM90%2055.5V63h15V48H90v7.5zM117%2055.5V63h15V48h-15v7.5zM144%2055.5V63h15V48h-15v7.5zM27%2079.5V87h15V72H27v7.5zM48%2079.5V87h96V72H48v7.5zM150%2079.5V87h15V72h-15v7.5zM81%20124.5c0%20.8.7%201.5%201.5%201.5s1.5.7%201.5%201.5.7%201.5%201.5%201.5%201.5.7%201.5%201.5.7%201.5%201.5%201.5%201.5.7%201.5%201.5.7%201.5%201.5%201.5%201.5.7%201.5%201.5.7%201.5%201.5%201.5%201.5.7%201.5%201.5.7%201.5%201.5%201.5%201.5-.7%201.5-1.5.7-1.5%201.5-1.5%201.5-.7%201.5-1.5.7-1.5%201.5-1.5%201.5-.7%201.5-1.5.7-1.5%201.5-1.5%201.5-.7%201.5-1.5.7-1.5%201.5-1.5%201.5-.7%201.5-1.5.7-1.5%201.5-1.5%201.5-.7%201.5-1.5c0-1.3-2.5-1.5-16.5-1.5s-16.5.2-16.5%201.5z%22%2F%3E%3C%2Fsvg%3E");
  background-size: 65px 47px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
@-webkit-keyframes keyboard-cursor {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes keyboard-cursor {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.am-list-item.am-input-item {
  height: 88px;
  padding-left: 30px;
  padding-right: 30px;
}
.am-list-item.am-input-item:after {
  display: block;
  position: absolute;
  content: '';
  left: 30px;
  bottom: 0;
  right: auto;
  top: auto;
  width: 100%;
  border-bottom: 1PX solid #ddd;
}
.am-list-item .am-input-label {
  color: #000;
  font-size: 34px;
  margin-left: 0;
  margin-right: 10px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  padding: 4px 0;
}
.am-list-item .am-input-label.am-input-label-2 {
  width: 68px;
}
.am-list-item .am-input-label.am-input-label-3 {
  width: 102px;
}
.am-list-item .am-input-label.am-input-label-4 {
  width: 136px;
}
.am-list-item .am-input-label.am-input-label-5 {
  width: 170px;
}
.am-list-item .am-input-label.am-input-label-6 {
  width: 204px;
}
.am-list-item .am-input-label.am-input-label-7 {
  width: 238px;
}
.am-list-item .am-input-control {
  font-size: 34px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.am-list-item .am-input-control input {
  color: #000;
  font-size: 34px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background-color: transparent;
  line-height: 1;
  box-sizing: border-box;
}
.am-list-item .am-input-control input::-webkit-input-placeholder {
  color: #bbb;
  line-height: 1.2;
}
.am-list-item .am-input-control input:disabled {
  color: #bbb;
  background-color: #fff;
}
.am-list-item .am-input-clear {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  font-style: normal;
  color: #fff;
  background-color: #ccc;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23fff'%20viewBox%3D'0%200%2030%2030'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E");
  background-size: 42px auto;
  background-position: 4px 4px;
}
.am-list-item .am-input-clear:active {
  background-color: #108ee9;
}
.am-list-item.am-input-focus .am-input-clear {
  display: block;
}
.am-list-item .am-input-extra {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  min-width: 0;
  max-height: 42px;
  overflow: hidden;
  padding-right: 0;
  line-height: 1;
  color: #888;
  font-size: 30px;
  margin-left: 10px;
}
.am-list-item.am-input-error .am-input-control input {
  color: #f50;
}
.am-list-item.am-input-error .am-input-error-extra {
  height: 42px;
  width: 42px;
  margin-left: 12px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D'18'%20height%3D'18'%20viewBox%3D'0%200%2018%2018'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cg%20stroke%3D'none'%20stroke-width%3D'1'%20fill%3D'none'%20fill-rule%3D'evenodd'%3E%3Cg%20transform%3D'translate(-300.000000%2C%20-1207.000000)'%20fill%3D'%23FF5500'%3E%3Cg%20id%3D'exclamation-circle-o'%20transform%3D'translate(300.000000%2C%201207.000000)'%3E%3Cpath%20d%3D'M9%2C16.734375%20C10.0441406%2C16.734375%2011.0566406%2C16.5304688%2012.009375%2C16.1279297%20C12.9304688%2C15.7376953%2013.7566406%2C15.1804687%2014.4685547%2C14.4703125%20C15.1787109%2C13.7601563%2015.7376953%2C12.9322266%2016.1261719%2C12.0111328%20C16.5304688%2C11.0566406%2016.734375%2C10.0441406%2016.734375%2C9%20C16.734375%2C7.95585938%2016.5304688%2C6.94335938%2016.1279297%2C5.990625%20C15.7376953%2C5.06953125%2015.1804687%2C4.24335938%2014.4703125%2C3.53144531%20C13.7601563%2C2.82128906%2012.9322266%2C2.26230469%2012.0111328%2C1.87382813%20C11.0566406%2C1.46953125%2010.0441406%2C1.265625%209%2C1.265625%20C7.95585938%2C1.265625%206.94335938%2C1.46953125%205.990625%2C1.87207031%20C5.06953125%2C2.26230469%204.24335938%2C2.81953125%203.53144531%2C3.5296875%20C2.82128906%2C4.23984375%202.26230469%2C5.06777344%201.87382813%2C5.98886719%20C1.46953125%2C6.94335938%201.265625%2C7.95585938%201.265625%2C9%20C1.265625%2C10.0441406%201.46953125%2C11.0566406%201.87207031%2C12.009375%20C2.26230469%2C12.9304688%202.81953125%2C13.7566406%203.5296875%2C14.4685547%20C4.23984375%2C15.1787109%205.06777344%2C15.7376953%205.98886719%2C16.1261719%20C6.94335938%2C16.5304688%207.95585938%2C16.734375%209%2C16.734375%20L9%2C16.734375%20Z%20M9%2C18%20C4.02890625%2C18%200%2C13.9710937%200%2C9%20C0%2C4.02890625%204.02890625%2C0%209%2C0%20C13.9710937%2C0%2018%2C4.02890625%2018%2C9%20C18%2C13.9710937%2013.9710937%2C18%209%2C18%20L9%2C18%20L9%2C18%20Z%20M9%2C6.75%20C8.61152344%2C6.75%208.296875%2C7.06464844%208.296875%2C7.453125%20L8.296875%2C13.9394531%20C8.296875%2C14.3279297%208.61152344%2C14.6425781%209%2C14.6425781%20C9.38847656%2C14.6425781%209.703125%2C14.3279297%209.703125%2C13.9394531%20L9.703125%2C7.453125%20C9.703125%2C7.06464844%209.38847656%2C6.75%209%2C6.75%20L9%2C6.75%20Z%20M8.20898438%2C4.83398438%20C8.20898438%2C5.27085024%208.56313413%2C5.625%209%2C5.625%20C9.43686587%2C5.625%209.79101562%2C5.27085024%209.79101562%2C4.83398438%20C9.79101562%2C4.39711851%209.43686587%2C4.04296875%209%2C4.04296875%20C8.56313413%2C4.04296875%208.20898438%2C4.39711851%208.20898438%2C4.83398438%20L8.20898438%2C4.83398438%20Z'%20id%3D'Shape'%20transform%3D'translate(9.000000%2C%209.000000)%20scale(1%2C%20-1)%20translate(-9.000000%2C%20-9.000000)%20'%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 42px auto;
}
.am-list-item.am-input-disabled .am-input-label {
  color: #bbb;
}
.am-list-body .am-list-item:last-child {
  border-bottom: 0;
}
.am-list-body .am-list-item:last-child:after {
  display: none;
}