如何防止jquery mobile将圆角应用于插入列表中的图标图像?

sut 发布于 2018-12-06 jquery 最后更新 2018-12-06 22:59 3 浏览

如何防止jquery mobile将圆角应用于插入列表中的图标图像? 我检查这个页面列表标志http://jquerymobile.com/demos/1.0rc1/docs/lists/lists-inset.html它显示很好,但是当我使用相同的图标有圆角。

<li data-theme="a" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-icon ui-corner-top">
<div class="ui-btn-inner ui-li">
    <div class="ui-btn-text">
        <a data-transition="slide" href="lists.html" class="ui-link-inherit"><img class="ui-li-icon ui-li-thumb ui-corner-tl" alt="France" src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png">Lists</a>
    </div>
    <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
</div>
</li>
enter image description here enter image description here
已邀请:

xsed

赞同来自:

jQM有另一个类:

  • UI-角无
实例: HTML:
<div data-role="page" class="type-home">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li>
                <a href="#"><img src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png" alt="lists" class="ui-li-icon">Lists (class="ui-li-icon")</a>
            </li>
            <li>
                <a href="#"><img src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png" alt="lists" class="ui-li-icon">Lists (class="ui-li-icon")</a>
            </li>
        </ul>
<br />
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li>
                <a href="#"><img src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png" alt="lists" class="ui-li-icon ui-corner-none">Lists (class="ui-li-icon ui-corner-none")</a>
            </li>
            <li>
                <a href="#"><img src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png" alt="lists" class="ui-li-icon ui-corner-none">Lists (class="ui-li-icon ui-corner-none")</a>
            </li>
        </ul>
</div>
</div>
查看jQM CSS 我发现它与@naugtur建议的非常接近
.ui-corner-none {
    -moz-border-radius:     0;
    -webkit-border-radius:  0;
    border-radius:          0;
}

quo_et

赞同来自:

您应该覆盖CSS而不是遍历每个元素。这不适用于稍后带到DOM的元素。 尝试

<style>
img.ui-corner-tl{
-webkit-border-radius: 0px !important;
 -moz-border-radius: 0px !important;
 border-radius: 0px !important;
}
</style>

gomnis

赞同来自:

我看到你的img标签标记中有“ui-corner-tl”。你注意到了吗?

要回复问题请先登录注册