jqueryMobile中select样式自定义

jquery mobile对于前段开发带来了便利，但同时，对于刚刚接触的新手来说，问题就来了。

比如本人最近在为公司开发手机页面的时候，明明很好用的东西拿过来用，但是在某种场景之下，就显得有点笨拙。

因为jquery mobile定义了一些写死的东西，这时候要用html5的时候，如果直接拿过来用，却取消不了jm的样式。即便是写在标签内部样式也于事无补。

试过各种办法之后，后来也只有一种办法可取，那就是禁用jm的一些样式就可以了。

这里举例的是如何禁用jm中select 的样式：

要去掉引入的jqueryMobile给下拉框组件的样式，有两种办法。

第一种：全局的去掉所有的下拉框样式：

<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
            $.mobile.page.prototype.options.keepNative = "select";
        });
    </script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.3.1.js"></script>

在jquery加载之前和jqueryMobile之后加入js:

 <script type="text/javascript">
        $(document).bind("mobileinit", function () {
            $.mobile.page.prototype.options.keepNative = "select";
        });
    </script> 

第二种方法：给制定的组件去掉样式

在select下拉中加入date-role="none"属性

<select id="" name="" data-role="none">

这两种方式都有效。

以上文章为本人在工作过程中遇到的部分问题，后经百度找到的解决办法。