*{box-sizing: border-box;} .sfwenben { background: #FFFFFF; padding: 10px; } .sfwenben>p { text-align: center; font-size: 14px; color: #333333; } .inputBoxContainer { width: calc(100% - 90px); height: 30px; margin: 10px auto; position: relative; } .inputBoxContainer .bogusInput { width: 280px; height: 30px; margin: 0 auto; } ul.bogusInput li{ border: solid 1px #f1f1f1; width: 30px; height: 30px; float: left; background: #ffffff; text-align: center; line-height: 30px; margin-right: 20px; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; } ul.bogusInput li:last-child{ margin-right: 0px; } .confirmButton { width: 240px; height: 45px; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; background: #f4f4f4; border: #d5d5d5 1px solid; display: block; font-size: 16px; margin: 30px auto; margin-bottom: 20px; } .showValue { width: 240px; height: 22px; line-height: 22px; font-size: 16px; text-align: center; margin: 0 auto; } .chakan { width: 290px; margin: 30px auto; height: 40px; text-align: center; line-height: 40px; color: #FFFFFF; background: #17B3EC; font-size: 16px; border-radius: 5px; } .wenzi{font-size: 14px;color: #666;} .round{display:none;width: 8px;height: 8px;border-radius: 50%;background-color: #666;} ul.bogusInput li.active .round{display: block;} ul.bogusInput li.hover{outline: 0;-webkit-box-shadow:0 0 10px rgba(102, 175, 233, 0.7); } .xufang-num{position: absolute;bottom: 0px;z-index: 9999;background-color: #fff;width: 100%;} .number-pad{border-top:solid 1px #dcdcdc; border-left: solid 1px #dcdcdc; width: 100%;} .number-pad .box{display: flex;display: -webkit-flex;display: -webkit-box;} .number-pad li{width: 33.333333%;height: 60px;text-align: center;line-height: 60px;border-bottom: solid 1px #dcdcdc;border-right: solid 1px #dcdcdc;font-size: 16px;color: #333;font-weight: bold;} .number-pad li.gray{background-color: #e4e4e4;} .number-pad li:active{background-color: #ccc;}