如何删除按钮的圆角(jQuery Mobile)?

时间:2014-08-28 21:15:48

标签: css asp.net jquery-mobile

我尝试了answers in here。但是,它不起作用。我尝试将data-corners="false"添加到ul代码中。我还将此CSS添加到RadioButtonList

.list-rb div{
    margin-top: -16px;
    border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    border: 0px solid #000000;
}

我还在ui-corner-tr添加了RadioButtonList CssClass。没运气。有没有办法做到这一点?我的HTML或CSS中是否存在阻止我正确执行此操作的内容?

<ul data-role="listview" data-divider-theme="a" data-inset="true" data-corners="false">
    <li data-theme="a" data-role="list-divider" class="ui-li ui-li-divider ui-bar-b">
        <asp:Localize ID="locWirelessNetworks" runat="server"
            EnableViewState="False" meta:resourcekey="locWirelessNetworksRc1"
            Text="Select Network">
        </asp:Localize>
    </li>
    <br />
    <asp:RadioButtonList ID="rblWirelessNetworks" runat="server" cssclass="list-rb">
    </asp:RadioButtonList>
</ul>

enter image description here

编辑:我正在使用jQuery-Mobile 1.3

2 个答案:

答案 0 :(得分:2)

看起来您正在使用jQuery Mobile 1.3或更低版本。

因此,尝试删除.ui-radio类中LABEL元素的边界半径和边距:

.ui-radio label {
    border-radius: 0;
    margin: 0;
}

然后你也可以删除LI本身的填充和边框:

li {
    padding: 0 !important;
    border: 0  !important;
}
  

这是 DEMO

注意:我们可能需要从ASP.Net RadioButtonList控件中查看呈现的HTML ...

答案 1 :(得分:0)

解决方案比您想象的要容易。将其添加到您的CSS:

li {
    list-style-type:square;
}

这应该可以解决问题!