셀렉트 박스 스타일이 가능한가요?

셀렉트 박스 스타일이 가능한가요?

닫힘.이 질문은 책, 도구, 소프트웨어 라이브러리 등에 대한 권장 사항을 찾는 것입니다.충족되지 않습니다.스택 오버플로 지침입니다.현재 답변을 수락하고 있지 않습니다.

---

책, 도구, 소프트웨어 라이브러리 등에 대한 추천을 구하는 질문은 허용되지 않습니다.질문에 사실과 인용문으로 답변할 수 있도록 질문을 편집할 수 있습니다.

8년 전에 문을 닫았습니다.

이 질문을 개선합니다.

스타일을 지정해야 하는 HTML 선택 상자가 있습니다.저는 CSS만 사용하고 싶지만, 필요하다면 jQuery를 사용하여 부족한 부분을 채울 것입니다.

누가 좋은 튜토리얼이나 플러그인을 추천해줄 수 있나요?

알아요, 구글, 하지만 지난 두 시간 동안 검색했는데 제 요구에 맞는 것을 찾을 수가 없어요.

다음이 필요합니다.

• jQuery 1.3.2와 호환 가능
• 액세스 가능
• 방해하지 않음
• 선택 상자의 모든 측면에서 스타일을 완벽하게 맞춤화할 수 있습니다.

제 요구를 들어줄 만한 것을 아는 사람이 있습니까?

저 밖에서 몇 개의 jQuery 플러그인이 변환되는 것을 보았습니다.<select>의 to 의에<ol>의 모래<option>의 to 의에<li> 그래서 CSS로 할 수 , 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년 기준으로 확인할 가치가 있는 두 가지는 다음과 같습니다.

• 선택됨 - 멋진 것들이 가득하고, 깃허브에서 7,000명 이상의 관찰자들.(댓글에서 '유료 괴짜'가 언급함)
• 선택2 - 선택에서 영감을 받아 선택에 대한 몇 가지 유용한 조정이 있는 Angular-UI의 일부입니다.

응!

---

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

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

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

CSS에 관해서는, 모질라가 특히 FF 3.5+에서 가장 친근한 것 같습니다.웹킷 브라우저는 대부분 자신만의 작업을 수행하고 모든 스타일을 무시합니다.IE는 매우 제한적이지만 IE8을 사용하면 테두리 색상/폭을 스타일로 지정할 수 있습니다.

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의 내부 업데이트Javascript가 있는 HTML입니다.jQuery를 통한 간편한 사용:

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

바로 그거야!선택 상자 대신 div 스타일만 지정하면 됩니다.위 코드를 테스트하지 않았으니 수정이 필요할 것 같습니다.하지만 당신이 요점을 이해하기를 바랍니다.

이 솔루션은 {-webkit-ar피아란스: 없음;}을(를) 능가한다고 생각합니다.브라우저가 가장 많이 해야 할 일은 양식 요소와의 상호 작용을 지시하는 것이지만, 사이트 설계를 위반하기 때문에 페이지에 처음 표시되는 방식은 분명히 아닙니다.

만약 당신이 가장 원한다면 여기 작은 플러그가 있습니다.

• 의 폐쇄 상태를 사용자 지정하여 열광합니다.select
• 그러나 오픈 상태에서는 옵션(회전 휠, 화살표 키, 탭 포커스, Ajax 수정)을 선택하는 것보다 더 나은 네이티브 경험을 선호합니다.options등를 합니다.
• 것을 ul,li markups

그러면 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를 사용한 선택 태그의 사용자 지정을 지원하지 않습니다.하지만 나는 선택 태그의 스타일을 만드는 데 사용할 수 있는 자바스크립트를 발견했습니다.그러나 평소처럼 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>

이제 본문 태그 내부의 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가 필요하지 않습니다.스타일 선택을 사용하여 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 선택 상자의 동작을 모방하려고 하지만 jQuery UI를 사용하여 선택 상자의 스타일을 지정하고 애니메이션을 만들 수도 있습니다.한번 보시고 어떻게 생각하시는지 알려주세요.

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로 범위 태그를 삽입하고 사용자가 드롭다운 값을 변경할 경우 동적으로 값을 변경합니다.이 튜토리얼에 코드 설명과 함께 표시된 전체 데모입니다.그것이 당신의 문제를 해결하기를 바랍니다.

JQuery Code는 이와 유사합니다.

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

언급URL : https://stackoverflow.com/questions/1072239/is-it-possible-to-style-a-select-box