복붙노트

[JQUERY] 그것은 선택 상자 스타일 수 있습니까? [닫은]

JQUERY

그것은 선택 상자 스타일 수 있습니까? [닫은]

해결법

  1. 1.나는 약간의 jQuery 플러그인을 본 적이 거기 밖으로 변환 <선택>의에 <안녕>의 및 <옵션>의에
  2. 의, 그래서 당신은 CSS로 스타일을 수있다. 자신의 롤 너무 어려울 수 없습니다.

    3. 나는 약간의 jQuery 플러그인을 본 적이 거기 밖으로 변환 <선택>의에 <안녕>의 및 <옵션>의에

  3. 의, 그래서 당신은 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;
}

  4. 2.업데이트 : 2013 년 가치가 검사를하다 내가 본 두 사람은 다음과 같습니다

    업데이트 : 2013 년 가치가 검사를하다 내가 본 두 사람은 다음과 같습니다

    네!

    내가 찾은 가장 가볍고 유연한 솔루션 2012 일 기준으로 ddSlick입니다. 사이트에서 관련 (편집) 정보 :

    그리고 여기에 다양한 모드의 미리보기입니다 :

  5. 3.CSS에 관해서는, 모질라는 특히 FF 3.5에서 가장 쉬운 것 같다. 웹킷 브라우저는 대부분 단지 자신의 일을하고, 어떤 스타일을 무시합니다. IE8은 적어도 스타일의 테두리 색상 / 폭을 할 수 있지만 IE는 매우 제한됩니다.

    CSS에 관해서는, 모질라는 특히 FF 3.5에서 가장 쉬운 것 같다. 웹킷 브라우저는 대부분 단지 자신의 일을하고, 어떤 스타일을 무시합니다. IE8은 적어도 스타일의 테두리 색상 / 폭을 할 수 있지만 IE는 매우 제한됩니다.

    실제로 (물론, 색상 환경 설정을 따기) 3.5 FF에서 상당히 좋은 모습 다음 :

    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에 올 때, 당신은 당신이 옵션 메뉴가 아래로 당겨지지 않을 때 표시하지 않는 경우 옵션에 배경 색상을 사용하지 않도록 설정해야합니다. 내가 말했듯이 그리고, 웹킷은 자신의 일을한다.

  6. 4.우리는이 작업을 수행 할 수있는 간단하고 괜찮은 방법을 발견했습니다. 그것은 분해 크로스 브라우저, 그리고 양식 게시물을 아프게하지 않습니다. 먼저 0으로 선택 상자의 투명도를 설정합니다.

    우리는이 작업을 수행 할 수있는 간단하고 괜찮은 방법을 발견했습니다. 그것은 분해 크로스 브라우저, 그리고 양식 게시물을 아프게하지 않습니다. 먼저 0으로 선택 상자의 투명도를 설정합니다.

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

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

    당신은 아직도 그것을 클릭 수 있도록이입니다

    그런 다음 선택 상자와 같은 크기로 DIV합니다. 사업부는 배경으로 선택 상자 아래에 배치해야합니다. 사용 {총수 : 절대} 및 Z 인덱스는이를 달성하기 위해.

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

    자바 스크립트와 사업부의 innerHTML을 업데이트합니다. jQuery로 Easypeasy :

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

    즉입니다! 그냥 선택 상자 대신 DIV의 스타일을. 당신은 아마 그것을 조정할 필요합니다 그래서 위의 코드를 테스트하지 않았습니다. 그러나 희망 당신은 요점을 얻을.

    나는이 솔루션 비트 생각 {-webkit-외관 : 없음;}. 어떤 브라우저가 매우 기껏해야하는 것은 자신이 처음에 그 휴식 사이트 디자인과 페이지에 표시하는 방법을 확실히 폼 요소를 결정 합니 상호 작용하지만.

  7. 5.당신이 대부분 원한다면 여기에 약간의 플러그입니다

    당신이 대부분 원한다면 여기에 약간의 플러그입니다

    그런 다음 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에 체크 아웃

  8. 6.당신은 그 자체로 CSS와 어느 정도의 스타일을 할 수 있습니다

    당신은 그 자체로 CSS와 어느 정도의 스타일을 할 수 있습니다

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

    그러나 이것은 전적으로 브라우저에있다. 일부 브라우저는 고집이다.

    그러나 이것은 단지 지금까지 당신을 얻을 것이다, 그것은 항상 아주 좋은 보이지 않는다. 완전한 제어를 위해, 당신은 선택 상자의 기능을 모방 자신의 위젯 jQuery를 통해 선택을 교체해야합니다. JS되지 않습니다 때, 일반 선택 상자를 그 자리에 있는지 확인합니다. 이것은 더 많은 사용자가 양식을 사용할 수 있습니다, 그리고 접근성에 도움이됩니다.

  9. 7.대부분의 브라우저는 CSS를 사용하여 select 태그의 사용자 정의를 지원하지 않습니다. 그러나 나는 스타일을 선택 태그에 사용할 수있는이 자바 스크립트를 찾을 수 있습니다. 그러나 IE 브라우저에 대한 일반적인없는 지원과 같은.

    대부분의 브라우저는 CSS를 사용하여 select 태그의 사용자 정의를 지원하지 않습니다. 그러나 나는 스타일을 선택 태그에 사용할 수있는이 자바 스크립트를 찾을 수 있습니다. 그러나 IE 브라우저에 대한 일반적인없는 지원과 같은.

    http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ 나는이 그 onchange를 속성 나던 작업에 오류를 발견

  10. 8.난 그냥 정말 좋은 보이는이 발견했다.

    난 그냥 정말 좋은 보이는이 발견했다.

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

  11. 9.하다면 jQuery를하지 않고 해결책을 가지고 있습니다. 당신이 작동하는 예를 볼 수있는 링크 : http://www.letmaier.com/_selectbox/select_general_code.html (자세한 CSS로 스타일)

    하다면 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>

  12. 10.2014 업데이트 : 당신은 이것에 대한 jQuery를 필요가 없습니다. 당신은 완전히 StyleSelect를 사용하여 jQuery를하지 않고 선택 상자 스타일을 지정할 수 있습니다. 예를 들면, 다음과 같은 선택 상자를 부여 :

    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')를 실행 :

  13. 11.나는 며칠 전 jQuery 플러그인, SelectBoxIt을 만들었습니다. 그것은 일반 HTML 선택 상자의 동작을 모방하려고뿐만 아니라 스타일에 당신을 허용하고 jQueryUI를 사용하여 선택 상자를 애니메이션. 봐, 그리고 나를 어떻게 생각하는지 알려주십시오.

    나는 며칠 전 jQuery 플러그인, SelectBoxIt을 만들었습니다. 그것은 일반 HTML 선택 상자의 동작을 모방하려고뿐만 아니라 스타일에 당신을 허용하고 jQueryUI를 사용하여 선택 상자를 애니메이션. 봐, 그리고 나를 어떻게 생각하는지 알려주십시오.

    http://www.selectboxit.com

  14. 12.당신은 ikSelect 같은 일부 jQuery 플러그인을 사용하여 시도해야합니다.

    당신은 ikSelect 같은 일부 jQuery 플러그인을 사용하여 시도해야합니다.

    나는 그것이 매우 사용자 정의 할 수 있지만 쉽게 사용할 수 있도록했습니다.

    http://github.com/Igor10k/ikSelect

  15. 13.이 여기에 오래된하지만 매우 흥미로운 플러그인을 보인다 - http://uniformjs.com

    이 여기에 오래된하지만 매우 흥미로운 플러그인을 보인다 - http://uniformjs.com

  16. 14.사용하는 트위터 - 부트 스트랩 스타일에이 드롭 다운 메뉴 셀렉틴십시오 https://github.com/silviomoreto/bootstrap-select

    사용하는 트위터 - 부트 스트랩 스타일에이 드롭 다운 메뉴 셀렉틴십시오 https://github.com/silviomoreto/bootstrap-select

  17. 15.간단한 솔루션은 선택 사업부 내부 상자 및 스타일 설계를 일치 사업부 워프입니다. 설정 불투명도 : 0 상자를 선택하기 위해서는 선택 상자가 보이지 않게됩니다. jQuery로 span 태그를 삽입하고 값 아래 사용자 변경 놓으면 동적 값을 변경. 코드 설명과이 튜토리얼에 표시된 총 시연. 이 문제를 해결 바랍니다.

    간단한 솔루션은 선택 사업부 내부 상자 및 스타일 설계를 일치 사업부 워프입니다. 설정 불투명도 : 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>

    18. from https://stackoverflow.com/questions/1072239/is-it-possible-to-style-a-select-box by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 언제 jQuery의 document.ready 기능을 사용해야합니까?  (0) 2020.10.08
[JQUERY] $ 아약스 - dataType와  (0) 2020.10.08
[JQUERY] HTML 요소는 jQuery를 사용하여 비어있는 경우 어떻게 확인합니까?  (0) 2020.10.08
[JQUERY] 브라우저에서 뒤로 버튼 클릭을 감지 [중복]  (0) 2020.10.08
[JQUERY] jQuery로 설정 입력 값 이후 업데이트 각도 모델  (0) 2020.10.08
,

티스토리툴바