2013-05-16 2 views
0

이 질문에 대한 답변이 쉽다면 죄송합니다.하지만 인터넷에서 답을 찾으려고했지만 정말 성공하지 못했습니다.Listview 항목 경계를 확인하고 체크 표시를합니다.

내 목록보기에서 모든 종류의 테두리와 체크 표시를 제거하고 싶습니다. 어떻게해야합니까?

테두리 나 외곽선을 아무 것도 설정하지 않았거나 투명하게 설정하려고했지만 이미 회색 테두리가 있습니다. 이걸 어떻게 제거 할 수 있습니까? 아니면 체크 표시를 제거하는 방법을 모르겠습니다.

enter image description here

HTML 코드 :

나의 현재 결과는이 (항목이 때 .win 선택한 클래스)입니다

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

여기에 HTML 코드 –

+0

을 게시하시기 바랍니다, 나는 회색의 경계를 커버하고자해서 내가 윤곽을 추가 ... 여전히 HTML – Clem

답변

0

다음 개요를 제거해야합니다.

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

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

하고 있어야 가능한 포스트 온라인 페이지의 링크 인 경우.

+0

같은 추가 할 수 있습니다. 나는이 앱 배경 (# F2F2F2)에도 같은 것을 사용하기 때문에이 색상을 추가합니다. – Clem

+0

! important를 사용해 보셨습니까? –

+0

예,하지만 그 경계선에 영향을주지는 않습니다. 새 윤곽선을 추가하면 새 윤곽선이 이전 윤곽선 위에있는 것처럼 보이므로 회색 테두리 만 덮습니다. – Clem

0

항목을 선택 취소 할 수있게하려면 목록보기의 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 화제가 도움이 될 수 있습니다.

+0

예, selectionMode를 "single"로 설정해야합니다. 또한 선택이 필요하지만이 추한 테두리를 제거하고 싶습니다. :) D : 테두리 또는 윤곽선을 제거하면 트릭이 수행되지만 분명히 잘못된 것입니다./ – Clem

+0

은 CSS 클래스를 참조하십시오. 응답의 스타일 목록보기 링크에서 'win-selectioncheckmark'를 누릅니다.귀하의 CSS에서 그들을 사용하여 스타일리스트보기. 자세한 내용은 winsslib/css/ui-light.css 파일에서이 css 클래스를 검색 할 수 있습니다. hth. – Sushil

+0

좋아, 내가 사용하는 내 CSS 코드에서 모든 win-selectioncheckmark를 편집하려고합니다 : border-color : transparent! important; 하지만 여전히 동일 ... – Clem

0

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