Có thể tạo kiểu cho một hộp chọn? [đóng cửa]

Tôi đã có một hộp chọn HTML mà tôi cần tạo kiểu. Tôi chỉ muốn sử dụng CSS nhưng nếu tôi phải sử dụng jQuery để lấp đầy các khoảng trống.

Bất cứ ai có thể đề nghị một hướng dẫn tốt hoặc plugin?

Tôi biết, Google, nhưng tôi đã tìm kiếm trong hai giờ qua và tôi không tìm thấy bất cứ điều gì đáp ứng nhu cầu của tôi.

Nó cần phải:

• Tương thích với jQuery 1.3.2
• Có thể truy cập
• Không phô trương
• Hoàn toàn có thể tùy chỉnh về mặt kiểu dáng mọi khía cạnh của hộp chọn

Có ai biết bất cứ điều gì sẽ đáp ứng nhu cầu của tôi?

Tôi đã thấy một số plugin jQuery có khả năng chuyển đổi <select>thành <ol>'và <option>' thành <li>', để bạn có thể tạo kiểu cho nó bằng CSS. Không thể quá khó để tự lăn.

Đây là một: https://gist.github.com/1139558 (Được sử dụng cho anh ta ở đây , nhưng có vẻ như trang web bị sập.)

Sử dụng nó như thế này:

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

Phong cách nó như thế này:

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

Cập nhật: Kể từ năm 2013, hai cái mà tôi thấy đáng để kiểm tra là:

• Chosen - vô số thứ hay ho, 7k + người theo dõi trên github. (được đề cập bởi 'một mọt sách được trả tiền' trong các bình luận)
• Chọn2 - lấy cảm hứng từ Chosen, một phần của Angular-UI với một vài điều chỉnh hữu ích trên Chosen.

Vâng!

Kể từ năm 2012, một trong những giải pháp linh hoạt, nhẹ nhất mà tôi tìm thấy là ddSlick . Thông tin liên quan (chỉnh sửa) từ trang web:

• Thêm hình ảnh và văn bản vào select options
• Có thể sử dụng JSON để điền tùy chọn
• Hỗ trợ các chức năng gọi lại khi lựa chọn

Và đây là bản xem trước của các chế độ khác nhau:

Đối với CSS, Mozilla có vẻ thân thiện nhất, đặc biệt là từ FF 3.5+. Các trình duyệt Webkit chủ yếu chỉ làm việc của riêng họ và bỏ qua mọi kiểu dáng. IE rất hạn chế, mặc dù IE8 cho phép bạn ít nhất là kiểu màu / chiều rộng đường viền.

Điều sau đây thực sự trông khá đẹp trong FF 3.5+ (tất nhiên là chọn tùy chọn màu của bạn):

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

Nhưng khi nói đến IE, bạn phải tắt màu nền trên tùy chọn nếu bạn không muốn nó hiển thị khi menu tùy chọn không được kéo xuống. Và, như tôi đã nói, webkit làm việc riêng của nó.

Chúng tôi đã tìm thấy một cách đơn giản và tốt để làm điều này. Đó là trình duyệt chéo, có thể phân hủy và không phá vỡ một bài mẫu. Đầu tiên, đặt độ mờ của hộp chọn thành 0.

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

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

điều này là để bạn vẫn có thể nhấp vào nó

Sau đó tạo div với cùng kích thước với hộp chọn. Các div nên nằm dưới hộp chọn làm nền. Sử dụng {vị trí: tuyệt đối} và chỉ số z để đạt được điều này.

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

Cập nhật div bên trong của div với javascript. Dễ dàng với jQuery:

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

Đó là nó! Chỉ cần phong cách div của bạn thay vì hộp chọn. Tôi đã không kiểm tra mã ở trên vì vậy có lẽ bạn sẽ cần chỉnh nó. Nhưng hy vọng bạn có được ý chính.

Tôi nghĩ giải pháp này đánh bại {-webkit-ngoại hình: none;}. Những gì trình duyệt nên làm nhiều nhất là ra lệnh tương tác với các thành phần của biểu mẫu, nhưng chắc chắn không phải là cách chúng hiển thị ban đầu trên trang vì điều đó phá vỡ thiết kế trang web.

Đây là một chút cắm nếu bạn chủ yếu muốn

• phát điên tùy chỉnh trạng thái đóng của một selectphần tử
• nhưng ở trạng thái mở , bạn thích trải nghiệm bản địa tốt hơn để chọn các tùy chọn (bánh xe cuộn, phím mũi tên, tiêu điểm tab, sửa đổi ajax thành options, zindex thích hợp, v.v.)
• không thích sự lộn xộn ul, litạo ra đánh dấu

Sau đó, jquery.yaselect.js có thể phù hợp hơn . Đơn giản:

$('select').yaselect();

Và đánh dấu cuối cùng là:

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

Kiểm tra nó trên github.com

Bạn có thể tự tạo kiểu ở một mức độ nào đó với CSS

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

Nhưng điều này hoàn toàn phụ thuộc vào trình duyệt. Một số trình duyệt cứng đầu.

Tuy nhiên, điều này sẽ chỉ đưa bạn đến nay và nó không phải lúc nào cũng trông rất tốt. Để kiểm soát hoàn toàn, bạn sẽ cần thay thế một lựa chọn thông qua jQuery bằng một tiện ích của riêng bạn mô phỏng chức năng của hộp chọn. Đảm bảo rằng khi JS bị vô hiệu hóa, một hộp chọn bình thường sẽ ở đúng vị trí của nó. Điều này cho phép nhiều người dùng sử dụng biểu mẫu của bạn và nó giúp ích cho khả năng truy cập.

Hầu hết các trình duyệt không hỗ trợ tùy chỉnh thẻ chọn bằng css. Nhưng tôi thấy javascript này có thể được sử dụng để tạo kiểu thẻ chọn. Nhưng như thường lệ, không hỗ trợ cho các trình duyệt IE.

http://ryanfait.com/resource/custom-checkboxes-and-radio-buttons/ Tôi nhận thấy một lỗi về điều này mà thuộc tính Onchange không hoạt động

Tôi chỉ tìm thấy điều này có vẻ thực sự tốt.

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

Nếu có một giải pháp mà không có jQuery. Một liên kết nơi bạn có thể thấy một ví dụ hoạt động: http://www.letmaier.com/_selectbox/select_general_code.html (được tạo kiểu với nhiều css hơn)

Phần phong cách của giải pháp của tôi:

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

Bây giờ mã HTML bên trong thẻ 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>

Cập nhật cho năm 2014: Bạn không cần jQuery cho việc này . Bạn hoàn toàn có thể định kiểu một hộp chọn mà không cần jQuery bằng StyleSelect . Ví dụ, được đưa ra hộp chọn sau:

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

Chạy styleSelect('select.demo')sẽ tạo một hộp chọn theo kiểu như sau:

Tôi đã tạo plugin jQuery, SelectBoxIt , một vài ngày trước. Nó cố gắng bắt chước hành vi của hộp chọn HTML thông thường, nhưng cũng cho phép bạn định kiểu và tạo hiệu ứng cho hộp chọn bằng jQueryUI. Hãy xem và cho tôi biết những gì bạn nghĩ.

http://www.selectboxit.com

Bạn nên thử sử dụng một số plugin jQuery như ikSelect .

Tôi đã cố gắng để làm cho nó rất tùy biến nhưng dễ sử dụng.

http://github.com/Igor10k/ikSelect

Điều này có vẻ cũ nhưng đây là một plugin rất thú vị - http://uniformjs.com

cái này sử dụng các twitter-bootstrapkiểu để bật selecttrong dropdownmenu https://github.com/silviomoreto/bootstrap-select

Giải pháp đơn giản là Warp hộp chọn của bạn bên trong div và tạo kiểu cho div phù hợp với thiết kế của bạn. Đặt độ mờ: 0 để chọn hộp, nó sẽ làm cho hộp chọn không nhìn thấy được. Chèn thẻ span với jQuery và thay đổi giá trị của nó một cách linh hoạt nếu người dùng thay đổi giá trị thả xuống. Tổng trình diễn trong hướng dẫn này với giải thích mã. Hy vọng nó sẽ giải quyết vấn đề của bạn.

Mã JQuery trông giống như thế này.

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