Listview remove item border and checkmark - css

Question

I'm sorry if answer on this question is to easy, but I was realy trying to find answer on the internet, but without any success.
I wish to remove all kind of borders and checkmark's from my listview. How can I do this?
I already tryed to set border and outline on none or transparent or something, but there is still some kind of gray border. I have no idea how can I remove this one or how to remove checkmark?
My current result is this(when item has .win-selected class):
Html code:
<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>
And css code:
.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

You need to remove this outline:
.filter-view .item {
background-color: #F2F2F2;
outline: #F2F2F2 solid 10px;
}
Should be
.filter-view .item {
background-color: #F2F2F2;
outline: 0;
}
And if is possible post a link of your page online.

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

To change the border appearance of ListView's item hover and active state, you'll have to override .win-itembox's value with ::before selector.
.win-listview .win-itembox:hover::before {
border-color: transparent; /* get rid of border, both of :hover and .win-pressed (same as :active) */
}
The default values can be found at ui-light.css or ui-dark.css, where the opacity and the color value of border is located.
/* 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;
}