선택 상자의 스타일을 지정할 수 있습니까? [닫은]

스타일을 지정해야하는 HTML 선택 상자가 있습니다. CSS 만 사용하는 것을 선호하지만 jQuery를 사용하여 간격을 메울 것입니다.

누구나 좋은 튜토리얼이나 플러그인을 추천 할 수 있습니까?

Google은 알고 있지만 지난 2 시간 동안 검색을했는데 내 요구에 맞는 것을 찾지 못했습니다.

다음과 같아야합니다.

• jQuery 1.3.2와 호환
• 얻기 쉬운
• 눈에 거슬리지 않는
• 선택 상자의 모든 측면에 스타일을 적용하여 완벽하게 사용자 정의 가능

누구든지 내 필요를 충족시킬 수있는 것을 알고 있습니까?

내가 거기 밖으로 일부의 jQuery 플러그인이 변환을 보았다 <select>'s의 <ol>의와 <option>의에 <li>의, 그래서 당신은 CSS로 스타일을 수있다. 자신의 롤을 너무 힘들 수 없습니다.

여기의 하나 https://gist.github.com/1139558은 (그가하는 데 사용 여기에 있지만, 사이트가 다운 된 것 같습니다.)

다음과 같이 사용하십시오.

$('#myselectbox').selectbox();

다음과 같이 스타일을 지정하십시오.

div.selectbox-wrapper ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.selectbox-wrapper ul li.selected { 
  background-color: #EAF2FB;
}
div.selectbox-wrapper ul li.current { 
  background-color: #CDD8E4;
}
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}

업데이트 : 2013 년 현재 확인할 가치가있는 두 가지는 다음과 같습니다.

• 선택된 -github에서 멋진 물건, 7k + 감시자. (의견에 '유료 대가'로 언급)
• Select2 -Angular-UI의 일부인 Chosen에서 영감을 받아 선택된 몇 가지 유용한 조정이 이루어졌습니다.

네!

2012 년 현재 내가 찾은 가장 가볍고 유연한 솔루션 중 하나는 ddSlick 입니다. 사이트에서 관련 (편집 된) 정보 :

• 이미지와 텍스트를 추가 select options
• JSON을 사용하여 옵션을 채울 수 있음
• 선택시 콜백 기능 지원

다음은 다양한 모드의 미리보기입니다.

CSS는 Mozilla가 가장 친근한 것 같습니다 (특히 FF 3.5 이상). 웹킷 브라우저는 대부분 자체 작업을 수행하며 모든 스타일을 무시합니다. IE8은 최소한 테두리 색상 / 너비 스타일을 허용하지만 IE는 매우 제한적입니다.

다음은 실제로 FF 3.5 이상에서 상당히 좋아 보입니다 (물론 색상 환경 설정 선택).

select {
    -moz-border-radius: 4px;
    -moz-box-shadow: 1px 1px 5px #cfcfcf inset;
    border: 1px solid #cfcfcf;
    vertical-align: middle;
    background-color: transparent;
}
option {
    background-color: #fef5e6;
    border-bottom: 1px solid #ebdac0;
    border-right: 1px solid #d6bb86;
    border-left: 1px solid #d6bb86;
}
option:hover {
    cursor: pointer;
}

그러나 IE의 경우 옵션 메뉴를 풀다운하지 않을 때 옵션을 표시하지 않으려면 옵션에서 배경색을 비활성화해야합니다. 그리고 내가 말했듯이 웹킷은 자체적으로 작업합니다.

이 작업을 수행하는 간단하고 알맞은 방법을 찾았습니다. 브라우저 간, 분해 가능하며 양식 게시물을 손상시키지 않습니다. 먼저 선택 상자의 불투명도를 0으로 설정하십시오.

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

이것은 당신이 여전히 그것을 클릭 할 수 있도록

그런 다음 선택 상자와 동일한 치수로 div를 만드십시오. div는 배경으로 선택 상자 아래에 있어야합니다. 이를 달성하려면 {position : absolute} 및 z-index를 사용하십시오.

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

자바 스크립트로 div의 innerHTML을 업데이트하십시오. jQuery로 Easypeasy :

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

그게 다야! 선택 상자 대신 div 스타일을 지정하십시오. 위의 코드를 테스트하지 않았으므로 아마도 조정해야 할 것입니다. 그러나 희망적으로 요점을 얻습니다.

이 솔루션이 {-webkit-appearance : none;}을 능가한다고 생각합니다. 브라우저가 가장해야 할 일은 양식 요소와의 상호 작용을 지시하는 것이지만 사이트 디자인을 깨뜨릴 때 처음에 페이지에 표시되는 방식은 아닙니다.

주로 원한다면 약간의 플러그가 있습니다.

• 요소 의 닫힌 상태 를 커스터마이즈select
• 그러나 열린 상태 에서는 옵션 선택 (스크롤 휠, 화살표 키, 탭 포커스,에 대한 ajax 수정 options, 적절한 zindex 등)에 대한 더 나은 기본 경험을 선호합니다.
• 지저분 ul하고 li생성 된 마크 업을 싫어함

그러면 jquery.yaselect.js가 더 적합 할 수 있습니다 . 간단히:

$('select').yaselect();

그리고 마지막 마크 업은 :

<div class="yaselect-wrap">
  <div class="yaselect-current"><!-- current selection --></div>
</div>
<select class="yaselect-select" size="5">
  <!-- your option tags -->
</select>

github.com 에서 확인하십시오

CSS 자체로 어느 정도 스타일을 지정할 수 있습니다

select {
    background: red;
    border: 2px solid pink;
}

그러나 이것은 전적으로 브라우저에 달려 있습니다. 일부 브라우저는 완고합니다.

그러나 이것은 지금까지 당신을 데려 갈 것이며 항상 좋아 보이지는 않습니다. 완전한 제어를 위해서는 jQuery를 통한 선택을 선택 상자의 기능을 에뮬레이트하는 자체 위젯으로 바꾸어야합니다. JS가 비활성화되면 일반 선택 상자가 제자리에 있는지 확인하십시오. 이를 통해 더 많은 사용자가 귀하의 양식을 사용할 수 있으며 접근성이 향상됩니다.

대부분의 브라우저는 CSS를 사용한 선택 태그 사용자 정의를 지원하지 않습니다. 그러나 select 태그의 스타일을 지정하는 데 사용할 수있는이 자바 스크립트를 찾습니다. 그러나 평소와 같이 IE 브라우저는 지원하지 않습니다.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Onchange 속성이 작동하지 않는다는 오류를 발견했습니다.

나는 이것이 정말로 좋아 보이는 것을 발견했다.

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

jQuery가없는 솔루션이있는 경우. 실제 예제를 볼 수있는 링크 : http://www.letmaier.com/_selectbox/select_general_code.html (더 많은 CSS로 스타일 지정)

내 솔루션의 스타일 섹션 :

<style>
#container { margin: 10px; padding: 5px; background: #E7E7E7; width: 300px; background: #ededed); }
#ul1 { display: none; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; }
#container a {  color: #333333; text-decoration: none; }
#container ul li {  padding: 3px;   padding-left: 0px;  border-bottom: 1px solid #aaa;  font-size: 0.8em; cursor: pointer; }
#container ul li:hover { background: #f5f4f4; }
</style>

이제 body-tag 내부의 HTML 코드는 다음과 같습니다.

<form>
<div id="container" onMouseOver="document.getElementById('ul1').style.display = 'block';" onMouseOut="document.getElementById('ul1').style.display = 'none';">
Select one entry: <input name="entrytext" type="text" disabled readonly>
<ul id="ul1">
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 1'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 1</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 2'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 2</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 3'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 3</a></li>
</ul>
</div>
</form>

2014 년 업데이트 :이를 위해 jQuery가 필요하지 않습니다 . StyleSelect를 사용하여 jQuery없이 선택 상자의 스타일을 완전히 지정할 수 있습니다 . 예를 들어 다음과 같은 선택 상자가 있습니다.

<select class="demo">
  <option value="value1">Label 1</option>
  <option value="value2" selected>Label 2</option>
  <option value="value3">Label 3</option>
</select>

실행 styleSelect('select.demo')하면 다음과 같이 스타일이 지정된 선택 상자가 만들어집니다.

며칠 전에 jQuery 플러그인 SelectBoxIt을 만들었습니다 . 일반 HTML 선택 상자의 동작을 모방하려고 시도하지만 jQueryUI를 사용하여 선택 상자의 스타일을 지정하고 애니메이션을 적용 할 수도 있습니다. 당신의 생각을 알려주세요.

http://www.selectboxit.com

ikSelect 와 같은 jQuery 플러그인을 사용해보십시오 .

나는 그것을 매우 사용자 정의 할 수 있지만 사용하기 쉽게 만들려고했습니다.

http://github.com/Igor10k/ikSelect

이것은 오래된 것 같지만 여기에 매우 흥미로운 플러그인-http: //uniformjs.com

사용에이 twitter-bootstrap스타일을 켭 select에서 dropdown메뉴 https://github.com/silviomoreto/bootstrap-select

간단한 해결책은 div 내부에서 선택 상자를 뒤 틀고 디자인과 일치하는 div의 스타일을 지정하는 것입니다. 선택 상자를 불투명도 : 0으로 설정하면 선택 상자가 보이지 않게됩니다. jQuery와 함께 span 태그를 삽입하고 사용자가 드롭 다운 값을 변경하면 값을 동적으로 변경하십시오. 코드 설명과 함께이 학습서에 표시된 전체 데모 . 문제가 해결되기를 바랍니다.

JQuery 코드는 이와 비슷합니다.

 <script>
   $(document).ready(function(){
     $('.dropdown_menu').each(function(){
       var baseData = $(this).find("select option:selected").html();
       $(this).prepend("<span>" + baseData + "</span>");
     });

     $(".dropdown_menu select").change(function(e){
       var nodeOne = $(this).val();
       var currentNode = $(this).find("option[value='"+ nodeOne +"']").text();
       $(this).parents(".dropdown_menu").find("span").text(currentNode);
     });
   });
</script>