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

Question

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

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

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

我目前的结果是这样的（当项目具有 .win-selected 类时）：

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

To make items not selectable, selectionMode for the listview needs to be set. you may also want swipeBehavior and tapBehavior to be none.

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

Regards the mouse hover highlight - styling listview topic might help.

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;
}