Czy można stylizować zaznaczone pole? [Zamknięte]

Mam pole wyboru HTML, które muszę stylizować. Wolałbym używać tylko CSS, ale jeśli będę musiał, użyję jQuery do wypełnienia luk.

Czy ktoś może polecić dobry tutorial lub wtyczkę?

Wiem, Google, ale szukałem przez ostatnie dwie godziny i nie znajduję niczego, co spełnia moje potrzeby.

Musi to być:

• Kompatybilny z jQuery 1.3.2
• Dostępny
• Dyskretny
• Całkowicie konfigurowalny pod względem stylizacji każdego aspektu wybranego pudełka

Czy ktoś wie coś, co spełni moje potrzeby?

Widziałem kilka wtyczek jQuery, które konwertują <select>'s na <ol>' s i <option>'s na <li>' s, dzięki czemu możesz stylizować to za pomocą CSS. Nie może być zbyt trudne do zrobienia własnego.

Oto jeden: https://gist.github.com/1139558 (kiedyś tu był , ale wygląda na to, że strona nie działa).

Użyj tego w ten sposób:

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

Ułóż to w ten sposób:

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

Aktualizacja: od 2013 r. Dwa, które widziałem, warte sprawdzenia to:

• Wybrany - mnóstwo fajnych rzeczy, 7k + obserwatorów na githubie. (wspomniane przez „płatnego frajera” w komentarzach)
• Select2 - zainspirowany Chosen, część Angular-UI z kilkoma przydatnymi poprawkami w Chosen.

Tak!

Od 2012 roku jednym z najlżejszych , elastycznych rozwiązań, jakie znalazłem, jest ddSlick . Odpowiednie (zredagowane) informacje z witryny:

• Dodaje obrazy i tekst do select options
• Może używać formatu JSON do wypełniania opcji
• Obsługuje funkcje oddzwaniania przy wyborze

A oto podgląd różnych trybów:

Jeśli chodzi o CSS, Mozilla wydaje się być najbardziej przyjazna, szczególnie od FF 3.5+. Przeglądarki Webkit zazwyczaj robią swoje i ignorują każdy styl. IE jest bardzo ograniczony, chociaż IE8 pozwala przynajmniej na określenie koloru / szerokości obramowania.

Poniższe rzeczy wyglądają całkiem ładnie w FF 3.5+ (oczywiście wybierając preferowany kolor):

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

Ale jeśli chodzi o IE, musisz wyłączyć kolor tła w opcji, jeśli nie chcesz, aby był wyświetlany, gdy menu opcji nie jest rozwinięte. I, jak powiedziałem, webkit robi swoje.

Znaleźliśmy na to prosty i przyzwoity sposób. Jest cross-browser, degradowalny i nie psuje postu formularza. Najpierw ustaw krycie pola wyboru na 0.

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

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

dzięki temu nadal możesz go kliknąć

Następnie utwórz element div o takich samych wymiarach jak pole wyboru. Element div powinien znajdować się pod polem wyboru jako tło. Aby to osiągnąć, użyj {pozycja: bezwzględna} i z-indeksu.

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

Zaktualizuj innerHTML elementu div za pomocą javascript. Easypeasy z jQuery:

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

Otóż ​​to! Po prostu nadaj styl swojemu elementowi div zamiast pola wyboru. Nie testowałem powyższego kodu, więc prawdopodobnie będziesz potrzebować go ulepszyć. Ale miejmy nadzieję, że rozumiesz sedno.

Myślę, że to rozwiązanie jest lepsze niż {-webkit-look: none;}. Przeglądarki powinny co najwyżej dyktować interakcję z elementami formularza, ale na pewno nie sposób ich początkowego wyświetlania na stronie, ponieważ to psuje projekt witryny.

Oto mała wtyczka, jeśli głównie chcesz

• zwariować Dostosowywanie stanie zamkniętym o selectelemencie
• ale w stanie otwartym preferujesz lepszą natywną obsługę opcji wybierania (kółko przewijania, klawisze strzałek, fokus kart, modyfikacje optionsAjax, właściwy zindex itp.)
• nie lubię niechlujnych ul, ligenerowanych znaczników

Wtedy jquery.yaselect.js może być lepszym rozwiązaniem . Po prostu:

$('select').yaselect();

A ostatni znacznik to:

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

Sprawdź to na github.com

Do pewnego stopnia możesz stylizować za pomocą samego CSS

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

Ale to zależy wyłącznie od przeglądarki. Niektóre przeglądarki są uparte.

Jednak to tylko zaprowadzi Cię do tej pory i nie zawsze wygląda to dobrze. Aby uzyskać pełną kontrolę, musisz zastąpić opcję select przez jQuery własnym widżetem, który emuluje funkcjonalność pola wyboru. Upewnij się, że gdy JS jest wyłączony, na swoim miejscu znajduje się normalne pole wyboru. Umożliwia to większej liczbie użytkowników korzystanie z formularza i pomaga w ułatwieniach dostępu.

Większość przeglądarek nie obsługuje dostosowywania zaznaczonego tagu za pomocą CSS. Ale znalazłem ten javascript, który może być użyty do stylizacji tagu wyboru. Ale jak zwykle brak obsługi przeglądarek IE.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Zauważyłem błąd w tym, że atrybut Onchange nie działa

Właśnie znalazłem to, co wydaje się naprawdę dobre.

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

Jeśli masz rozwiązanie bez jQuery. Link, w którym można zobaczyć działający przykład: http://www.letmaier.com/_selectbox/select_general_code.html (styl z dodatkowym css)

Część stylistyczna mojego rozwiązania:

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

Teraz kod HTML wewnątrz tagu 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>

Zaktualizowano na rok 2014: nie potrzebujesz do tego jQuery . Możesz w pełni stylizować pole wyboru bez jQuery za pomocą StyleSelect . Np. Biorąc pod uwagę następujące pole wyboru:

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

Uruchomienie styleSelect('select.demo')utworzy stylizowane pole wyboru w następujący sposób:

Stworzyłem wtyczkę jQuery, SelectBoxIt , kilka dni temu. Próbuje naśladować zachowanie zwykłego pola wyboru HTML, ale pozwala również stylizować i animować pole wyboru za pomocą jQueryUI. Spójrz i daj mi znać, co myślisz.

http://www.selectboxit.com

Powinieneś spróbować użyć wtyczki jQuery, takiej jak ikSelect .

Starałem się, aby był bardzo konfigurowalny, ale łatwy w użyciu.

http://github.com/Igor10k/ikSelect

Wydaje się, że to stara, ale tutaj bardzo interesująca wtyczka - http://uniformjs.com

na ten używa twitter-bootstrapstylów, aby włączyć selectw dropdownmenu https://github.com/silviomoreto/bootstrap-select

Prostym rozwiązaniem jest wypaczenie zaznaczonego pola wewnątrz elementu div i nadanie mu stylu pasującego do projektu. Ustaw krycie: 0, aby zaznaczyć pole, sprawi, że pole wyboru będzie niewidoczne. Wstaw tag span za pomocą jQuery i dynamicznie zmieniaj jego wartość, jeśli użytkownik zmieni rozwijaną wartość. Pełna demonstracja pokazana w tym samouczku z objaśnieniem kodu. Mam nadzieję, że to rozwiąże twój problem.

Kod JQuery wygląda podobnie do tego.

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