mobileSelect.css

.mobileSelect {

  position: relative;

  z-index: 0;

  opacity: 0;

  visibility: hidden;

  -webkit-transition: opacity 0.4s, z-index 0.4s;

  transition: opacity 0.4s, z-index 0.4s;

}

.mobileSelect * {

  margin: 0;

  padding: 0;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}

.mobileSelect .grayLayer {

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  background: #eee;

  background: rgba(0, 0, 0, 0.7);

  z-index: 888;

  display: block;

}

.mobileSelect .content {

  width: 100%;

  display: block;

  position: fixed;

  z-index: 889;

  color: black;

  -webkit-transition: all 0.4s;

  transition: all 0.4s;

  bottom: -350px;

  left: 0;

  background: white;

}

.mobileSelect .content .fixWidth {

  width: 90%;

  margin: 0 auto;

  position: relative;

}

.mobileSelect .content .fixWidth:after {

  content: ".";

  display: block;

  height: 0;

  clear: both;

  visibility: hidden;

}

.mobileSelect .content .btnBar {

  border-bottom: 1px solid #DCDCDC;

  font-size: 15px;

  height: 45px;

  position: relative;

  text-align: center;

  line-height: 45px;

}

.mobileSelect .content .btnBar .cancel,

.mobileSelect .content .btnBar .ensure {

  height: 45px;

  width: 55px;

  cursor: pointer;

  position: absolute;

  top: 0;

}

.mobileSelect .content .btnBar .cancel {

  left: 0;

  color: #666;

}

.mobileSelect .content .btnBar .ensure {

  right: 0;

  color: #1e83d3;

}

.mobileSelect .content .btnBar .title {

  font-size: 15px;

  padding: 0 15%;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

}

.mobileSelect .content .panel:after {

  content: ".";

  display: block;

  height: 0;

  clear: both;

  visibility: hidden;

}

.mobileSelect .content .panel .wheels {

  width: 100%;

  height: 200px;

  overflow: hidden;

}

.mobileSelect .content .panel .wheel {

  position: relative;

  z-index: 0;

  float: left;

  width: 50%;

  height: 200px;

  overflow: hidden;

  -webkit-transition: width 0.3s ease;

  transition: width 0.3s ease;

}

.mobileSelect .content .panel .wheel .selectContainer {

  display: block;

  text-align: center;

  -webkit-transition: -webkit-transform 0.18s ease-out;

  transition: -webkit-transform 0.18s ease-out;

  transition: transform 0.18s ease-out;

  transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out;

}

.mobileSelect .content .panel .wheel .selectContainer li {

  font-size: 15px;

  display: block;

  height: 40px;

  line-height: 40px;

  cursor: pointer;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

}

.mobileSelect .content .panel .selectLine {

  height: 40px;

  width: 100%;

  position: absolute;

  top: 80px;

  pointer-events: none;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  border-top: 1px solid #DCDCDC;

  border-bottom: 1px solid #DCDCDC;

}

.mobileSelect .content .panel .shadowMask {

  position: absolute;

  top: 0;

  width: 100%;

  height: 200px;

  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));

  background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);

  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);

  opacity: 0.9;

  pointer-events: none;

}

.mobileSelect-show {

  opacity: 1;

  z-index: 10000;

  visibility: visible;

}

.mobileSelect-show .content {

  bottom: 0;

}