반투명 select2 만드는 법?

나는 버튼이 적용된 다음 CSS와 반투명보고하게 -반투명 select2 만드는 법?

.navbar-toggle { 
    position:relative; 
    float:left; 
    display:block; 
    padding: 9px 10px; 
    background: rgba(0, 0, 0, 0.2); 
    background-image: none; 
    border: 0 none; 
    top:0px; 
    -webkit-border-radius: 2px; 
     -moz-border-radius: 2px; 
      border-radius: 2px; 
    outline: 0; 
    opacity: 1; 
    -webkit-transition: all .45s; 
     -moz-transition: all .45s; 
      transition: all .45s; 
      float: left; 
}

을하지만 select2 구성 요소에 적용 할 때, 그것이 투명하게보고하지 않습니다. Select2가 자체 테마를 적용하고 내가하는 일을 재정의하는 것처럼 보입니다. Select2도 supports themes이지만 상세한 문서는 is missing입니다.

어떻게 버튼 (jsfiddle demo 참조)

출처

2015-01-20 LA_

선택 2는 자신의 HTML을 추가 그래서 잘못된 HTML을 스타일링하는 경우 할 수있다. 어떤 요소가 생성되었는지 보려면 Browsertool을 사용하십시오. – Fuzzyma

http://jsfiddle.net/crxepevy/2/이게 당신이 찾고있는 것입니까? 컨테이너와 그 컨테이너를 모두 추가 할 수 있습니다. select2 클래스를 편집하십시오. 전 단지 구조를 사용하고 자신의 규칙 ontop 적용. 우리 모두가 them2를 기다리고 있습니다 select2 of – Persijn

@Persijn, 네, 이것이 제가 필요한 것입니다. 나는 또한 드롭 다운 목록 회색/반투명 싶었어요. Btw, select2 현재 스타일로 글꼴이 흰색입니다. 즉, 입력 한 내용을 볼 수 없습니다. –

내가 이것을 시도했습니다과 같은 방법으로보고 선택 2 스타일을 변경해야합니다 : 그것은 http://jsfiddle.net/crxepevy/1/ 잘 작동?

var data = [{ 
    id: 0, 
    text: 'enhancement' 
}, { 
    id: 1, 
    text: 'bug' 
}, { 
    id: 2, 
    text: 'duplicate' 
}, { 
    id: 3, 
    text: 'invalid' 
}, { 
    id: 4, 
    text: 'wontfix' 
}]; 


$(".js-example-data-array").select2({ 
    data: data, 
    theme: "themes-dark" 
});

CSS

<body> 
<nav class="mainmenu"> 
    <div class="container"> 
     <div class="navbar-right"> 
      <select class="js-example-data-array themes-dark"></select> 
      <button type="button" class="navbar-toggle"><font color="white"><i class="fa fa-search fa-lg fa-fw"></i></font> 
      </button> 
      <button type="button" class="navbar-toggle"><font color="white"><i class="fa fa-play fa-lg fa-fw"></i></font> 
      </button> 
      <button type="button" class="navbar-toggle"><font color="white"><i class="fa fa-vk fa-lg fa-fw"></i></font> 
      </button> 
     </div> 
    </div> 
</nav>

CSS

html { 
background:#505D6E url(http://habrastorage.org/files/a01/ca3/b36/a01ca3b360454f539b4275a3ad274c87.jpg) no-repeat center center fixed; 
min-height:100%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; } 

body { 
    background:transparent; 
    min-height:100%; 
    -webkit-font-smoothing: antialiased; 
    -webkit-overflow-scrolling: touch; 
    line-height: 1.5em; 
    font-size:14px; 
    font-family: Helvetica, Arial, sans-serif; 
    color:#fff; 
    color:rgba(255,255,255,.8); 
    font-weight: normal; 
} 

.mainmenu { z-index: 999999; width:100%; padding: 30px 0 0 0;} 
@media (min-width: 768px) { 
    .mainmenu { position: fixed; } 
} 

.navbar-toggle, .themes-dark, .select2-container--themes-dark { 
    position:relative; 
    display:block; 
    padding: 9px 10px; 
    background: rgba(0, 0, 0, 0.2); 
    background-image: none; 
    border: 0 none; 
    top:0px; 
    -webkit-border-radius: 2px; 
     -moz-border-radius: 2px; 
      border-radius: 2px; 
    outline: 0; 
    opacity: 1; 
    -webkit-transition: all .45s; 
     -moz-transition: all .45s; 
      transition: all .45s; 
      float: left; 
} 
select { 
    height: 39px !important; 
    width: 100px; 
    margin: 8px 20px !important; 
} 

span.select2.select2-container.select2-container--themes-dark.select2-container--below, .select2-container--themes-dark { 
margin-right: 20px !important; 
margin-top: 8px; 
height: 39px; 
}

01,

출처

2015-01-20 11:50:23 MaGiO

감사! 잘 무너져 보인다. 그러나 select2가 작동하지 않는 이상한 점은 하나의 요소 만 표시된다는 것입니다. 그냥 초기 피들과 동일한 문제가 있다는 것을 알았습니다. –

이 CSS 추가 : '.select2-container - 아래 .select2-dropdown - below { 배경 : 투명; border : none; } span.select2-container.select2-container - 테마 - 어둡습니다. 선택 2 컨테이너 - 열기 { 높이 : 220px; }' [링크] (http://jsfiddle.net/crxepevy/5/) – MaGiO

Fiddle

용기에 select2를 넣으십시오.

CSS상의 선택 2에 대한 지금

.nav-sel { 
    margin-top: 9px; 
    margin-right: 15px; 
    float: left; 
}

: 투명 배경과 세미 추가 된 많은이와

<div class="nav-sel">SELECT2</div>

당신은 CSS로 부트 스트랩 2 탐색 요소처럼 보일 수 있습니다 - 투명.

CSS

.select2-container { 
    background: transparent; 
} 

.select2-container .select2-selection { 
    border: none; 
    height: 40px; 
    background: rgba(0, 0, 0, 0.2); 
} 

.select2-container .select2-selection span:first-child { 
    color: white; 
} 

.select2-results ul li { 
    color: white; 
} 

.select2-dropdown { 
    background: rgba(0, 0, 0, 0.2); 
} 
.select2-search input:first-child { 
    background: transparent; 
}

출처

2015-01-20 12:12:36 Persijn

많은 감사! 훌륭합니다.선택 항목의 색상을 변경했으나 텍스트의 위치를 변경하는 방법을 알 수 없습니다. 기본 요소로 표시된 '강화'와 아래쪽 화살표는 수직 가운데 정렬해야합니다. –

필자는 위닝을 제대로 할 수없는 것 같지만 화살표는 올바르게 설정해야한다 :'top : 20px'와'line-height : 40px'는 그 문제를 해결해야하지만 필자는 필자와는 다르게 보인다. 그것. – Persijn

이 설정을 추가하기 위해 어떤 스타일을 수정해야합니까? –

반투명 select2 만드는 법?

답변

관련 문제