屏幕快照 2018-09-09 09.13.17.png

屏幕快照 2018-09-09 09.14.20.png

使用mobiscroll是个很好用的jquery日期插件，它可以实现在移动端滚动选择日期。
在vue中如何使用插件，在mounted中调用插件

        <a class="db pr con bgw">
          出生日期
            <input type="text" name="USER_AGE" id="USER_AGE" class="r set-input" placeholder="请填写你的出生日期" v-model="birthday"/>
          <svg class="i-right">
            <use xlink:href="#icon-right"/>
          </svg>
        </a>

data() {
      return {
        birthday: ''
      }
    },
    mounted() {
      require('./jquery.min');
      require('./mobiscroll.core-2.5.2');
      require('./mobiscroll.core-2.5.2-zh');
      require('./mobiscroll.datetime-2.5.1');
      require('./mobiscroll.datetime-2.5.1-zh');
      var currYear = (new Date()).getFullYear();
      var opt = {};
      opt.date = {preset: 'date'};
      opt.datetime = {preset: 'datetime'};
      opt.time = {preset: 'time'};
      opt.default = {
        theme: 'android-ics light', //皮肤样式
        display: 'modal', //显示方式
        mode: 'scroller', //日期选择模式
        dateFormat: 'yyyy-mm-dd',
        lang: 'zh',
        showNow: true,
        nowText: "今天",
        startYear: currYear - 80, //开始年份
        endYear: currYear, //结束年份
        onClose: function (textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel
          textVale=new Date(textVale);
          textVale=textVale.getTime()/1000;
          this.birthday= textVale;
          $.ajax({
            type: "GET",
            url: "api/set",
            dataType:"json",
            data:{"birthday":this.birthday},
            success:function (data) {
              if (data.code == 200) {
                this.birthday = data.data.birthday;
              }
            }
          })
        }
      };
      $("#USER_AGE").mobiscroll($.extend(opt['date'], opt['default']));
    }

屏幕快照 2018-09-09 09.39.38.png

全部代码

<template>
  <div class="bgm page">
    <dl class="space me-dl">
      <dd class="me-dd" style="margin-top: 0">
        <a class="db pr con bgw">
          头像
          <span class="r set-head" @click.stop="uploadHeadImg">
              <img class="set-head-icon" :src="avatar" style="width: 40px;height: 40px;">
            </span>
          <input type="file" accept="image/*" @change="handleFile" class="hiddenInput dn"/>
        </a>
        <a class="db pr con bgw">
          昵称
          <input class="r set-input" type="text" v-model="nickname" placeholder="请输入姓名" maxlength="50"/>
          <svg class="i-right">
            <use xlink:href="#icon-right"/>
          </svg>
        </a>
        <a class="db pr con bgw">
          手机号码
          <span class="r cc" style="padding-right: 1.4em">{{setData.mobile}}</span>
          <svg class="i-right">
            <use xlink:href="#icon-right"/>
          </svg>
        </a>
        <a class="db pr con bgw" @click="getPopRadio">
          性别
          <popup-radios :value="this.radioShow" @getRadio="getGender"></popup-radios>
          <span class="r cc" style="padding-right: 1.4em" v-if="this.gender">{{this.gender}}</span>
          <span class="r cc" style="padding-right: 1.4em" v-else>{{setData.sex}}</span>
          <svg class="i-right">
            <use xlink:href="#icon-right"/>
          </svg>
        </a>
        <a class="db pr con bgw">
          出生日期
            <input type="text" name="USER_AGE" id="USER_AGE" class="r set-input" placeholder="请填写你的出生日期" v-model="birthday"/>
          <svg class="i-right">
            <use xlink:href="#icon-right"/>
          </svg>
        </a>
      </dd>
      <dd class="me-dd">
        <a class="db pr con bgw" href="javascript:;" @click.prevent="jump" data-href="/member/setPassword">
          密码设置
          <svg class="i-right">
            <use xlink:href="#icon-right"/>
          </svg>
        </a>
        <a class="db pr con bgw" href="javascript:;" @click.prevent="doLogout" data-href="/member/setPassword">
          退出登录
        </a>
      </dd>
    </dl>
  </div>
</template>

<script>
  import popupRadios from '../../components/popup-radios.vue'
  import user from "../../components/login/user";
  export default {
    data() {
      return {
        checkLogin: true,
        setData: {},
        radioShow: false,
        gender: '',
        nickname: '',
        avatar: '',
        birthday: ''
      }
    },
    computed: {},
    components: {
      popupRadios
    },
    created() {
      this.getSet();
    },
    watch: {
      gender() {
        this.$http.get('api/set', {params: {"sex": this.gender}}).then(res => {
          let j = res.data;
          if (j.code == 200) {
            this.gender = j.data.sex;
          }
        })
      },
      nickname() {
        this.$http.get('api/set', {params: {"nickname": this.nickname}}).then(res => {
          let j = res.data;
          if (j.code == 200) {
            this.nickname = j.data.nickname;
          }
        })
      },
      avatar() {
        this.$http.get('api/set', {params: {"avatar": this.avatar}}).then(res => {
          let j = res.data;
          if (j.code == 200) {
            this.avatar = j.data.avatar;
          }
        })
      }
    },
    mounted() {
      require('./jquery.min');
      require('./mobiscroll.core-2.5.2');
      require('./mobiscroll.core-2.5.2-zh');
      require('./mobiscroll.datetime-2.5.1');
      require('./mobiscroll.datetime-2.5.1-zh');
      var currYear = (new Date()).getFullYear();
      var opt = {};
      opt.date = {preset: 'date'};
      opt.datetime = {preset: 'datetime'};
      opt.time = {preset: 'time'};
      opt.default = {
        theme: 'android-ics light', //皮肤样式
        display: 'modal', //显示方式
        mode: 'scroller', //日期选择模式
        dateFormat: 'yyyy-mm-dd',
        lang: 'zh',
        showNow: true,
        nowText: "今天",
        startYear: currYear - 80, //开始年份
        endYear: currYear, //结束年份
        onClose: function (textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel
          textVale=new Date(textVale);
          textVale=textVale.getTime()/1000;
          this.birthday= textVale;
          $.ajax({
            type: "GET",
            url: "api/set",
            dataType:"json",
            data:{"birthday":this.birthday},
            success:function (data) {
              if (data.code == 200) {
                this.birthday = data.data.birthday;
              }
            }
          })
        }
      };
      $("#USER_AGE").mobiscroll($.extend(opt['date'], opt['default']));
    },
    methods: {
      doLogout(){
        user.logout(()=>{
          this.$tip("已退出登录");
          this.$router.push('/login');
        });
      },
      jump(e) {
        e.preventDefault();
        if (this.checkLogin == true) {
          this.$router.push(e.currentTarget.getAttribute("data-href"));
        }
      },
      getSet() {
        this.$http.get('api/getset').then(res => {
          let j = res.data;
          if (j.code == 200) {
            this.setData = j.data;
            this.nickname = j.data.nickname;
            this.avatar = j.data.avatar;
            this.birthday = Date.format("yyyy-MM-dd", j.data.birthday*1000)
          }
        })
      },
      getPopRadio() {
        this.radioShow = !this.radioShow;
      },
      getGender(msg) {
        this.gender = msg;
      },
      // 打开图片上传
      uploadHeadImg: function () {
        this.$el.querySelector('.hiddenInput').click()
      },
      // 将头像显示
      handleFile: function (e) {
        let $target = e.target || e.srcElement;
        let file = $target.files[0];
        let param = new FormData(); //创建form对象
        param.append('file', file, file.name);//通过append向form对象添加数据
        param.append('chunk', '0');//添加form表单中其他数据
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        };  //添加请求头
        this.$http.post("api/upload", param, config).then(res => {
          var j = res.data;
          if (j.code === 200) {
            this.avatar = j.data[0];
            this.$tip("头像上传成功！");
          }
        })
      }
    }
  }
</script>
<style>
  .set-head {
    position: relative;
    top: .7em;
  }

  .set-head-icon {
    width: 2em;
    border-radius: 50%;
  }

  .me-dl {
    margin-top: 1px;
    font-size: .448rem;
  }

  .me-dd {
    margin: 10px 0;
  }

  .me-dd > .db {
    margin: 1px 0;
    line-height: 4;
  }

  .me-dd > .db > .i-right {
    position: absolute;
    width: .8em;
    height: .8em;
    right: 3%;
    top: 50%;
    margin-top: -0.4em;
  }

  .set-input {
    width: calc(100% - 6em);
    font-size: 1em;
    text-align: right;
    margin: 0;
    margin-top: 1.4em;
    padding-right: 1.4em;
    border: 0;
    outline: none;
  }

  /* Datewheel overlay */
  .dw {
    position: absolute;
    top: 5%;
    left: 0;
    z-index: 1001;
    color: #000;
    font-family: arial, verdana, sans-serif;
    font-size: 12px;
    text-shadow: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -ms-touch-action: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .dwi {
    position: static;
    margin: 5px;
    display: inline-block;
  }

  .dwwr {
    min-width: 170px;
    zoom: 1;
    padding: 0 10px;
    text-align: center;
  }

  /* Datewheel overlay background */
  .dw-persp, .dwo {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1001;
  }

  .dwo {
    background: #000;
    opacity: .7;
    filter: Alpha(Opacity=70);
  }

  /* Bubble positionings */
  .dw-bubble .dw {
    margin: 20px 0;
  }

  .dw-bubble .dw-arrw {
    position: absolute;
    left: 0;
    width: 100%;
  }

  .dw-bubble-top .dw-arrw {
    bottom: -36px;
  }

  .dw-bubble-bottom .dw-arrw {
    top: -36px;
  }

  .dw-bubble .dw-arrw-i {
    margin: 0 30px;
    position: relative;
    height: 36px;
  }

  .dw-bubble .dw-arr {
    display: block;
  }

  .dw-arr {
    display: none;
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-width: 18px 18px;
    border-style: solid;
    margin-left: -18px;
  }

  .dw-bubble-bottom .dw-arr {
    top: 0;
    border-color: transparent transparent #fff transparent;
  }

  .dw-bubble-top .dw-arr {
    bottom: 0;
    border-color: #fff transparent transparent transparent;
  }

  /* Datewheel wheel container wrapper */
  .dwc {
    float: none;
    margin: 0 2px 5px 2px;
    padding-top: 30px;
    display: inline-block;
  }

  .dwcc {
    clear: both;
  }

  /* Datewheel label */
  .dwl {
    text-align: center;
    line-height: 30px;
    height: 30px;
    white-space: nowrap;
    position: absolute;
    top: -30px;
    width: 100%;
  }

  /* Datewheel value */
  .dwv {
    padding: 10px 0;
    border-bottom: 1px solid #000;
  }

  /* Datewheel wheel container */
  .dwrc {
    -webkit-border-radius: 3px;
    border-radius: 3px;
  }

  .dwwc {
    margin: 0;
    padding: 0 2px;
    position: relative;
    background: #000;
    zoom: 1;
  }

  /* Datewheel wheels */
  .dwwl {
    margin: 4px 2px;
    position: relative;
    z-index: 5;
  }

  .dww {
    margin: 0 2px;
    overflow: hidden;
    position: relative;
  }

  .dwsc .dwwl {
    background: #888;
    background: linear-gradient(#000 0%, #333 35%, #888 50%, #333 65%, #000 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(#000), color-stop(0.35, #333), color-stop(0.50, #888), color-stop(0.65, #333), to(#000));
    background: -moz-linear-gradient(#000 0%, #333 35%, #888 50%, #333 65%, #000 100%);
    background: -o-linear-gradient(#000 0%, #333 35%, #888 50%, #333 65%, #000 100%);
  }

  .dwsc .dww {
    color: #fff;
    background: #444;
    background: linear-gradient(#000 0%, #444 45%, #444 55%, #000 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(#000), color-stop(0.45, #444), color-stop(0.55, #444), to(#000));
    background: -moz-linear-gradient(#000 0%, #444 45%, #444 55%, #000 100%);
    background: -o-linear-gradient(#000 0%, #444 45%, #444 55%, #000 100%);
  }

  .dw-bf {
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
  }

  .dw-ul {
    position: relative;
    z-index: 2;
  }

  .dw-li {
    padding: 0 5px;
    display: block;
    text-align: center;
    line-height: 40px;
    font-size: 26px;
    white-space: nowrap;
    text-shadow: 0 1px 1px #000;
    vertical-align: bottom;
    opacity: .3;
    filter: Alpha(Opacity=30);
  }

  /* Higlighted */
  .dw-li.dw-hl {
    background: #fff;
    background: rgba(255, 255, 255, .3);
  }

  /* Valid entry */
  .dw-li.dw-v {
    opacity: 1;
    filter: Alpha(Opacity=100);
  }

  /* Hidden entry */
  .dw-li.dw-h {
    visibility: hidden;
  }

  .dw-i {
    position: relative;
    height: 100%;
  }

  /* Wheel +/- buttons */
  .dwwb {
    position: absolute;
    z-index: 4;
    left: 0;
    cursor: pointer;
    width: 100%;
    height: 40px;
    text-align: center;
    opacity: 1;
    transition: opacity .2s linear;
    -webkit-transition: opacity .2s linear;
  }

  .dwa .dwwb {
    opacity: 0;
  }

  .dwwbp {
    top: 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    font-size: 40px;
  }

  .dwwbm {
    bottom: 0;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    font-size: 32px;
    font-weight: bold;
  }

  .dwpm .dwwc {
    background: transparent;
  }

  .dwpm .dww {
    margin: 0;
  }

  .dwpm .dw-li {
    text-shadow: none;
  }

  .dwpm .dwwol {
    display: none;
  }

  /* Datewheel wheel overlay */
  .dwwo {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#000 0%, rgba(44, 44, 44, 0) 52%, rgba(44, 44, 44, 0) 48%, #000 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(#000), color-stop(0.52, rgba(44, 44, 44, 0)), color-stop(0.48, rgba(44, 44, 44, 0)), to(#000));
    background: -moz-linear-gradient(#000 0%, rgba(44, 44, 44, 0) 52%, rgba(44, 44, 44, 0) 48%, #000 100%);
    background: -o-linear-gradient(#000 0%, rgba(44, 44, 44, 0) 52%, rgba(44, 44, 44, 0) 48%, #000 100%);
  }

  /* Background line */
  .dwwol {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    margin-top: -1px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #555;
  }

  /* Datewheel button */
  .dwbg .dwb {
    cursor: pointer;
    overflow: hidden;
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    margin: 0 2px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 -1px 1px #000;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    color: #fff;
    background: #000;
    background: linear-gradient(#6e6e6e 50%, #000 50%);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, #000), color-stop(0.5, #6e6e6e));
    background: -moz-linear-gradient(#6e6e6e 50%, #000 50%);
    background: -o-linear-gradient(#6e6e6e 50%, #000 50%);
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 5px;
  }

  /* Datewheel button container */
  .dwbc {
    padding: 5px 0;
    text-align: center;
    clear: both;
  }

  .dwbc:after {
    content: '';
    display: block;
    clear: both;
  }

  /* Datewheel button wrapper */
  .dwbw {
    display: inline-block;
    float: left;
    width: 50%;
    position: relative;
    z-index: 5;
  }

  .dwbc-p .dwbw {
    width: 33.33%;
  }

  /* Hidden label */
  .dwhl {
    padding-top: 10px;
  }

  .dwhl .dwl {
    display: none;
  }

  /* Multiple selection */
  .dwms .dwwms .dw-li {
    padding: 0 40px;
    position: relative;
  }

  .dwms .dw-msel:after {
    width: 40px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    content: '?';
  }

  /* Backgrounds */
  .dwbg {
    background: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
  }

  .dwbg .dwpm .dwwl {
    border: 1px solid #aaa;
  }

  .dwbg .dwpm .dww {
    color: #000;
    background: #fff;
    -webkit-border-radius: 3px;
  }

  .dwbg .dwwb {
    background: #ccc;
    color: #888;
    text-shadow: 0 -1px 1px #333;
    box-shadow: 0 0 5px #333;
    -webkit-box-shadow: 0 0 5px #333;
  }

  .dwbg .dwwbp {
    background: linear-gradient(#f7f7f7, #bdbdbd);
    background: -webkit-gradient(linear, left bottom, left top, from(#bdbdbd), to(#f7f7f7));
    background: -moz-linear-gradient(#f7f7f7, #bdbdbd);
    background: -o-linear-gradient(#f7f7f7, #bdbdbd);
  }

  .dwbg .dwwbm {
    background: linear-gradient(#bdbdbd, #f7f7f7);
    background: -webkit-gradient(linear, left bottom, left top, from(#f7f7f7), to(#bdbdbd));
    background: -moz-linear-gradient(#bdbdbd, #f7f7f7);
    background: -o-linear-gradient(#bdbdbd, #f7f7f7);
  }

  .dwbg .dwb-a {
    background: #3c7500;
    background: linear-gradient(#94c840 50%, #3c7500 50%);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, #3c7500), color-stop(0.5, #94c840));
    background: -moz-linear-gradient(#94c840 50%, #3c7500 50%);
    background: -o-linear-gradient(#94c840 50%, #3c7500 50%);
  }

  .dwbg .dwwl .dwb-a {
    background: #3c7500;
    background: linear-gradient(#94c840, #3c7500);
    background: -webkit-gradient(linear, left bottom, left top, from(#3c7500), to(#94c840));
    background: -moz-linear-gradient(#94c840, #3c7500);
    background: -o-linear-gradient(#94c840, #3c7500);
  }

  /* Android ICS skin */
  .android-ics .dw {
    padding: 0;
    color: #31b6e7;
    background: #292829;
  }

  .android-ics .dw .dwwc,
  .android-ics .dw .dwwl,
  .android-ics .dw .dww,
  .android-ics .dw .dwb,
  .android-ics .dw .dwpm .dww {
    background: none;
  }

  .android-ics .dwwr {
    padding: 0;
  }

  .android-ics .dwc {
    margin: 0;
    padding: 30px 10px 1px 10px;
  }

  .android-ics .dwhl {
    padding: 1px 10px;
  }

  .android-ics .dwv {
    height: 36px;
    line-height: 36px;
    padding: 0;
    border-bottom: 2px solid #31b6e7;
    font-size: 18px;
  }

  .android-ics .dwwl {
    margin: 0 2px;
  }

  .android-ics .dww,
  .android-ics .dw .dwpm .dwwl,
  .android-ics .dw .dwpm .dww {
    border: 0;
  }

  .android-ics .dww .dw-li {
    color: #fff;
    font-size: 18px;
    text-shadow: none;
  }

  .android-ics .dww .dw-li.dw-hl {
    background: #31b6e7;
    background: rgba(49, 182, 231, .5);
  }

  .android-ics .dwwo {
    background: linear-gradient(#282828 0%, rgba(40, 40, 40, 0) 52%, rgba(40, 40, 40, 0) 48%, #282828 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(#282828), color-stop(0.52, rgba(40, 40, 40, 0)), color-stop(0.48, rgba(40, 40, 40, 0)), to(#282828));
    background: -moz-linear-gradient(#282828 0%, rgba(40, 40, 40, 0) 52%, rgba(40, 40, 40, 0) 48%, #282828 100%);
    background: -o-linear-gradient(#282828 0%, rgba(40, 40, 40, 0) 52%, rgba(40, 40, 40, 0) 48%, #282828 100%);
  }

  .android-ics .dw .dwwb {
    background: #292829;
    box-shadow: none;
    -webkit-box-shadow: none;
  }

  .android-ics .dwwb span {
    display: none;
  }

  .android-ics .dwwb:after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    color: #7e7e7e;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    content: '';
  }

  .android-ics .dwwbm {
    top: 0;
    bottom: auto;
  }

  .android-ics .dwwbp {
    bottom: 0;
    top: auto;
  }

  .android-ics .dwwbm:after {
    border-color: transparent transparent #7e7e7e transparent;
  }

  .android-ics .dwwbp:after {
    border-color: #7e7e7e transparent transparent transparent;
  }

  .android-ics .dw .dwwl .dwb-a {
    background: #292829;
  }

  .android-ics .dwwbm.dwb-a:after {
    border-color: transparent transparent #319abd transparent;
  }

  .android-ics .dwwbp.dwb-a:after {
    border-color: #319abd transparent transparent transparent;
  }

  .android-ics .dw .dwwol {
    width: 60%;
    left: 20%;
    height: 36px;
    border-top: 2px solid #31b6e7;
    border-bottom: 2px solid #31b6e7;
    margin-top: -20px;
    display: block;
  }

  .android-ics .dwbc {
    border-top: 1px solid #424542;
    padding: 0;
  }

  .android-ics .dw .dwb {
    height: 36px;
    line-height: 36px;
    padding: 0;
    margin: 0;
    font-weight: normal;
    text-shadow: none;
    box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -webkit-box-shadow: none;
  }

  .android-ics .dw .dwb-a {
    background: #29799c;
  }

  .android-ics .dwb-s .dwb, .android-ics .dwb-n .dwb {
    border-right: 1px solid #424542;
  }

  /* Docked */
  .android-ics.dw-bottom .dw, .android-ics.dw-top .dw {
    border-radius: 0;
    -webkit-border-radius: 0;
  }

  /* Multiple select */
  .android-ics .dwwms .dwwol {
    display: none;
  }

  .android-ics .dwwms .dw-li {
    padding-left: 5px;
    padding-right: 36px;
  }

  .android-ics .dwwms .dw-li:after {
    content: '';
    position: absolute;
    top: 50%;
    left: auto;
    right: 10px;
    width: 14px;
    height: 14px;
    margin-top: -9px;
    color: #31b6e7;
    line-height: 14px;
    border: 1px solid #424542;
    text-shadow: 0 0 5px #29799c;
  }

  .android-ics .dwwms .dw-msel:after {
    content: '?';
  }

  /* Light version */
  .android-ics.light .dw {
    background: #f5f5f5;
  }

  .android-ics.light .dww .dw-li {
    color: #000;
  }

  .android-ics.light .dwwo {
    background: linear-gradient(#f5f5f5 0%, rgba(245, 245, 245, 0) 52%, rgba(245, 245, 245, 0) 48%, #f5f5f5 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(#f5f5f5), color-stop(0.52, rgba(245, 245, 245, 0)), color-stop(0.48, rgba(245, 245, 245, 0)), to(#f5f5f5));
    background: -moz-linear-gradient(#f5f5f5 0%, rgba(245, 245, 245, 0) 52%, rgba(245, 245, 245, 0) 48%, #f5f5f5 100%);
    background: -o-linear-gradient(#f5f5f5 0%, rgba(245, 245, 245, 0) 52%, rgba(245, 245, 245, 0) 48%, #f5f5f5 100%);
  }

  .android-ics.light .dw .dwwb {
    background: #f5f5f5;
    color: #f5f5f5;
  }

  .android-ics.light .dwbc {
    border-top: 1px solid #dbdbdb;
  }

  .android-ics.light .dwb {
    color: #000;
  }

  .android-ics.light .dwb-a {
    color: #fff;
  }

  .android-ics.light .dwb-s .dwb, .android-ics.light .dwb-n .dwb {
    border-right: 1px solid #dbdbdb;
  }

  /* Bubble positioning */
  .android-ics .dw-bubble-bottom .dw-arr {
    border-color: transparent transparent #292829 transparent;
  }

  .android-ics .dw-bubble-top .dw-arr {
    border-color: #292829 transparent transparent transparent;
  }

  /* Bubble positioning */
  .android-ics.light .dw-bubble-bottom .dw-arr {
    border-color: transparent transparent #f5f5f5 transparent;
  }

  .android-ics.light .dw-bubble-top .dw-arr {
    border-color: #f5f5f5 transparent transparent transparent;
  }

  /* Multiple select */
  .android-ics.light .dwwms .dw-li:after {
    text-shadow: 0 0 5px #31b6e7;
  }

</style>