เป็นไปได้ที่จะจัดสไตล์กล่องที่เลือกหรือไม่? [ปิด]

ฉันมี HTML select box ที่ฉันต้องการใส่สไตล์ ฉันต้องการใช้เพียง CSS แต่ถ้าฉันต้องฉันจะใช้ jQuery เพื่อเติมช่องว่าง

ใครสามารถแนะนำกวดวิชาหรือปลั๊กอินที่ดี?

ฉันรู้ว่า Google แต่ฉันค้นหาสองชั่วโมงที่ผ่านมาและฉันไม่พบสิ่งใดที่ตรงกับความต้องการของฉัน

มันจะต้องเป็น:

• เข้ากันได้กับ jQuery 1.3.2
• ที่สามารถเข้าถึงได้
• สงบเสงี่ยม
• ปรับแต่งได้อย่างสมบูรณ์ในแง่ของการออกแบบทุกด้านของกล่องที่เลือก

ไม่มีใครรู้อะไรที่จะตอบสนองความต้องการของฉัน?

ฉันเห็นปลั๊กอิน jQuery อยู่ที่นั่นแล้วเปลี่ยนเป็น<select>'s <ol>' และ<option>'s เป็น<li>' s เพื่อให้คุณสามารถจัดสไตล์ด้วย 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 ทั้งสองฉันเคยเห็นว่ามีค่าการตรวจสอบคือ:

• เลือก - โหลดของเท่ห์ ๆ 7k + ผู้ดูบน github (พูดถึงโดย 'a nerd ที่จ่าย' ในความคิดเห็น)
• Select2 - ได้รับแรงบันดาลใจจาก Chosen ซึ่งเป็นส่วนหนึ่งของ Angular-UI พร้อมการปรับแต่งที่เป็นประโยชน์เกี่ยวกับ Chosen

ใช่

ในฐานะที่เป็นของปี 2012 เป็นหนึ่งในที่มีน้ำหนักเบาที่สุดในการแก้ปัญหาที่มีความยืดหยุ่นที่ฉันได้พบเป็นddSlick ข้อมูลที่เกี่ยวข้อง (แก้ไข) จากเว็บไซต์:

• เพิ่มรูปภาพและข้อความ select options
• สามารถใช้ JSON เพื่อเติมข้อมูลตัวเลือก
• รองรับฟังก์ชั่นการโทรกลับเมื่อเลือก

และนี่คือตัวอย่างของโหมดต่างๆ:

สำหรับ CSS แล้ว Mozilla ดูเหมือนจะเป็นมิตรที่สุดโดยเฉพาะจาก FF 3.5+ เบราว์เซอร์ Webkit ส่วนใหญ่ทำสิ่งของตนเองและไม่สนใจสไตล์ใด ๆ 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 คุณต้องปิดการใช้งานสีพื้นหลังบนตัวเลือกหากคุณไม่ต้องการให้แสดงเมื่อเมนูตัวเลือกไม่ถูกดึงลงมา และอย่างที่ฉันพูด webkit ทำสิ่งที่เป็นของตัวเอง

เราพบวิธีที่ง่ายและเหมาะสมในการทำเช่นนี้ มันข้ามเบราว์เซอร์ย่อยสลายได้และไม่ทำลายโพสต์แบบฟอร์ม ขั้นแรกให้ตั้งค่าความทึบของกล่องที่เลือกเป็น 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>

อัปเดต InnerHTML ของ div ด้วย javascript Easypeasy กับ jQuery:

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

แค่นั้นแหละ! เพียงแค่สไตล์ div ของคุณแทนการเลือกกล่อง ฉันยังไม่ได้ทดสอบโค้ดข้างต้นดังนั้นคุณอาจต้องปรับแต่งมัน แต่หวังว่าคุณจะได้รับส่วนสำคัญ

ฉันคิดว่าวิธีการแก้ปัญหานี้เต้น สิ่งที่เบราว์เซอร์ควรทำมากที่สุดคือการกำหนดปฏิสัมพันธ์กับองค์ประกอบของฟอร์ม แต่ไม่แน่นอนว่าการแสดงครั้งแรกบนหน้าเว็บเป็นอย่างไรเมื่อแบ่งการออกแบบเว็บไซต์

นี่เป็นเพียงเล็กน้อยถ้าคุณต้องการ

• ไปบ้าการกำหนดสถานะปิดของ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 แต่ฉันพบจาวาสคริปต์นี้ซึ่งสามารถใช้สไตล์เลือกแท็ก แต่ตามปกติไม่รองรับเบราว์เซอร์ 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 ภายในแท็ก body:

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

Updated สำหรับปี 2014: คุณไม่จำเป็นต้อง jQuery สำหรับเรื่องนี้ คุณสามารถได้อย่างเต็มที่สไตล์เลือกกล่องโดยไม่ต้องใช้ jQuery StyleSelect เช่นได้รับกล่องเลือกต่อไปนี้:

<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

คุณควรลองใช้ปลั๊กอิน jQuery บางอย่างเช่นikSelect

ฉันพยายามทำให้มันปรับแต่งได้มาก แต่ใช้งานง่าย

http://github.com/Igor10k/ikSelect

ดูเหมือนว่าจะเก่า แต่ที่นี่เป็นปลั๊กอินที่น่าสนใจมาก - http://uniformjs.com

สิ่งนี้ใช้ twitter-bootstrapในรูปแบบที่จะเปิดselectในdropdownเมนู https://github.com/silviomoreto/bootstrap-select

วิธีง่ายๆคือ Warp กล่องที่คุณเลือกภายใน div และจัดสไตล์ div ที่ตรงกับการออกแบบของคุณ ตั้งค่าความทึบ: 0 เพื่อเลือกกล่องมันจะทำให้มองไม่เห็นกล่องที่เลือก แทรกแท็ก span ด้วย jQuery และเปลี่ยนค่าแบบไดนามิกหากผู้ใช้เปลี่ยนค่าแบบหล่นลง แสดงการสาธิตทั้งหมดในบทช่วยสอนนี้พร้อมคำอธิบายรหัส หวังว่ามันจะแก้ปัญหาของคุณ

รหัส 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>