如何从输入元素创建一个没有角的 Jquery Mobile 按钮？

Question

我正在使用 Jquery Mobile 输入构建控制组，如下所示：

<div data-role="controlgroup">
    <span class="ui-li ui-li-divider ui-bar-a ui-corner-top"><span class="ui-divider-text">Divider</span></span>
    <input type="button" data-icon="arrow-r" data-iconpos="right" value="text" />
    ....
</div>

虽然这很好用，但我经常会遇到输入元素也会出现角点的情况。我尝试通过在输入中添加 data-corners="false" 来覆盖 JQM

<input type="button" data-icon="arrow-r" data-corners="false" data-iconpos="right" value="text" />

但由于这是在包装输入元素的 div.ui-btn 上进行的，所以它不起作用。

问题：
有没有办法告诉 JQM 不要把角放在一个元素上？我无法将类添加到输入元素（如 ui-corner-I-don't-need，因为角将在包装 ui-btn 和 >ui-btn-inner，我只能通过 Jquery 访问（不想要）。

还有其他想法吗？

感谢您的意见！

Answer 1

用你的代码试试这个，只需给 div id

<script type="text/javascript">
        $(document).ready(function(){
            $('#buttongp > div.ui-controlgroup-controls > div:first').removeClass("ui-corner-top");
        });
    </script>


<div data-role="controlgroup" data-inset="true" id="buttongp">
                <span  id="buttonspangp" data-role="list-divider" class="ui-li ui-li-divider ui-bar-a ui-corner-top"><span class="ui-divider-text">Divider</span></span>
                <input type="button" data-icon="arrow-r" data-corners="false" data-iconpos="right" value="text" />
                <input type="button" data-icon="arrow-r" data-corners="false" data-iconpos="right" value="text" />
                <input type="button" data-icon="arrow-r" data-corners="false" data-iconpos="right" value="text" />
            </div>