Question

如果对这个问题的回答很容易，我很抱歉，但我真的试图在互联网上找到答案，但没有任何成功。

我希望从列表视图中删除所有类型的边框和复选标记。我怎么能这样做？

我已经尝试在无或透明或其他方面设置边框和轮廓，但仍然存在某种灰色边框。我不知道如何删除这个或如何删除复选标记？

我当前的结果是这个（当项目有.win选择的类时）：

enter image description here

Html代码：

<div class="filterPanel left">
     <h2 class="title">Status filter</h2>
     <div id="labRole_name" class="filter-view win-selectionstylefilled" data-win-control="WinJS.UI.ListView"  data-win-options="{ selectionMode: 'single', tapBehavior: 'directSelect',  layout: { type: WinJS.UI.ListLayout } }"></div>
</div>

和css代码：

.filter-view {
    width: 250px;
    margin-left: -7px;
    color: gray;
}

    .filter-view .item {
        background-color: #F2F2F2;
        outline: #F2F2F2 solid 10px;
    }

    .filter-view .item *{
        display: inline-block;
    }

    .filter-view .win-selected .item:hover .count,
    .filter-view .item:hover .count {
        color: #4BB3DD !important;
    }

    .filter-view .win-selected .item:hover .filter,
    .filter-view .item:hover .filter {
        color: #8B8B8B !important;
    }

    .filter-view .win-selected .item .filter,
    .filter-view .item .filter {
        color: #333333 !important;
    }

    .filter-view .win-selected .item .count,
    .filter-view .item .count {
        color: #0096D1 !important;
    }

    .filter-view .item .filter {
        margin-right: 10px;
        width: 160px;
        height: 20px;
        white-space: nowrap; 
        overflow: hidden;
    }

    .filter-view .item .count{
        min-width: 30px;
        text-align: right;
        font-weight: 400;
    }

Answer 1

您需要删除此大纲：

.filter-view .item {
    background-color: #F2F2F2;
    outline: #F2F2F2 solid 10px;
}

应该是

.filter-view .item {
    background-color: #F2F2F2;
    outline: 0;
}

如果可以在线发布您网页的链接。

Answer 2

要使项目不可选，需要设置listview的selectionMode。您可能还希望swipeBehavior和tapBehavior为none。

<div id="listView" data-win-control="WinJS.UI.ListView" 
  data-win-options="{ 
       selectionMode: 'none', swipeBehavior: 'none', 
       tapBehavior: 'none' }">
</div>

关于鼠标悬停突出显示 - styling listview主题可能会有所帮助。

Answer 3

要更改ListView的项目悬停和活动状态的边框外观，您必须使用 :: before 选择器覆盖.win-itembox的值。

.win-listview .win-itembox:hover::before {
    border-color: transparent; /* get rid of border, both of :hover and .win-pressed (same as :active) */
}

默认值可以在ui-light.css或ui-dark.css中找到，其中边框的不透明度和颜色值位于此处。

/* the default value of WinJS ListView's item hover and active color from ui-light.css */
html.win-hoverable .win-listview .win-itembox:hover::before,
html.win-hoverable .win-itemcontainer .win-itembox:hover::before {
  opacity: 0.4;
}
html.win-hoverable .win-listview .win-pressed .win-itembox:hover::before,
html.win-hoverable .win-listview .win-pressed.win-itembox:hover::before,
html.win-hoverable .win-itemcontainer.win-pressed .win-itembox:hover::before {
  opacity: 0.6;
}

...

html.win-hoverable .win-listview .win-itembox:hover::before,
html.win-hoverable .win-itemcontainer .win-itembox:hover::before {
  border-color: #000000;
}

Listview删除项目边框和复选标记

3 个答案: