列表視圖中刪除項邊框，並勾選

對不起，如果對這個問題的答案是簡單的，但我真的想在互聯網上找到答案，但沒有成功。列表視圖中刪除項邊框，並勾選

我想從我的列表視圖中刪除所有類型的邊界和對號年代。我怎樣才能做到這一點？

我已經tryed設置邊界和輪廓上沒有或透明或東西，但還是有某種灰色邊框的。我不知道如何刪除這個或如何刪除複選標記？

我現在的結果是這樣的（當項目已.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; 
    }

來源

2013-05-16 Clem

請張貼HTML代碼 –

這裏，我添加HTML – Clem

您需要刪除此輪廓：

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

應該

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

而且如果有可能後您網頁的鏈接在線。

來源

2013-05-16 12:09:53

還是一樣...我添加的輪廓，只是因爲我希望覆蓋灰白的邊界。我添加這種顏色，因爲我使用相同的應用程序背景（＃F2F2F2）。 – Clem

您是否嘗試過使用！重要？ –

是的，我做了，但它接縫，它不影響邊界。當我添加新的大綱，它看起來像新大綱高於舊人，所以只覆蓋的是灰色的邊框... – Clem

爲了使項目不可選的，需要的SelectionMode爲ListView進行設置。你可能也想swipeBehavior和tapBehavior都沒有。

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

關心鼠標懸停突出顯示 - styling listview主題可能有所幫助。

來源

2013-05-16 12:27:41 Sushil

是的，但我需要selectionMode設置爲「單一」。此外，我需要選擇，但我希望刪除這個醜陋的邊界:)就是這樣：D我認爲刪除邊框或輪廓將做的伎倆，但顯然我錯了：/ – Clem

引用CSS類例如在樣式listview鏈接中的'win-selectioncheckmark'回答。在你的CSS中使用它們來創建listview風格。有關詳細信息 - 您可以在winjslib/css/ui-light.css文件中搜索這些css類。心連心。 – Sushil

好的，我嘗試編輯我的CSS代碼中的每個win-selectioncheckmark，使用：border-color：transparent！important; 但仍然一樣... – Clem

要更改ListView的項目懸停和活動狀態的邊框外觀，您必須覆蓋.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; 
}

來源

2016-08-22 13:29:39 trueCresc

列表視圖中刪除項邊框，並勾選

回答

相關問題