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

145

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?

Apoorv Khurasia
źródło
6
masz na myśli, że chcesz konfigurowalne menu (wbudowane w jquery), prawda? ponieważ pola wyboru nie są nawet obiektami przeglądarki (są obiektami platformy), są bardzo proste, bardzo surowe i nie można ich stylizować (na przykład nie można stylizować obramowań)
Ayyash
+1 za ładne wyjaśnienie i formatowanie!
Manish
6
Wybrany jest wart wspomnienia, ale nie jest bardzo konfigurowalny i ma wiele otwartych problemów. Miło jednak patrzeć i używać.
płatny kujon
1
@Ayyash To, co mówisz, dotyczy MSHTML (Internet Explorer i przyjaciele) i WebCore (Safari) w niektórych systemach (z pewnością Mac OS). Nie dotyczy to Gecko (Firefox i przyjaciele). Tak więc rzeczywisty problem polega na tym, że nie można stylizować selectelementów w różnych przeglądarkach. Ale jeśli ludzie chcą żyć z różnicami, możesz je stylizować - łącznie z granicami.
PointedEars
1
@PointedEras tak, w 2012 roku mogą, ale zgaduję, że to było 3 lata temu, kiedy powiedziałem to, co powiedziałem, jestem prawie pewien, że wtedy oddałem strzał i to nie zadziałało
Ayyash

Odpowiedzi:

45

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;
}
Mark A. Nicolosi
źródło
Próbowałem tej wersji początkowo, ale DIV nie jest ustawiony względem miejsca, w którym znajduje się pole wyboru. Zamiast tego jest mocno przesunięty w lewo.
Sam tego nie używałem. Wersja demonstracyjna ( brainfault.com/demo/selectbox/0.5 ) wygląda dobrze. Rozejrzyj się za innymi implementacjami. Wiem, że widziałem kilka innych wtyczek, które to robią.
Mark A. Nicolosi
1
Wypróbowałem to i działało przez chwilę, aż musiałem umieścić więcej niż jeden na stronie. Teraz trudno jest stylizować, ponieważ z jakiegoś głupiego powodu autor pomyślał, że można użyć tego samego identyfikatora dla wszystkich elementów zamiast unikalnych identyfikatorów lub klas. Teraz myślę o napisaniu własnego ...
Jonathan
19
404 - jakieś pomysły, gdzie były lustra?
Moak
2
Uważaj tylko, ponieważ większość wybranych wtyczek menu jest niedostępna dla czytników ekranu. Nie znalazłem jeszcze takiego, który działa.
Marcy Sutton,
18

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:

wprowadź opis obrazu tutaj

papercowboy
źródło
14

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.

arxpoetica
źródło
11

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.

Shaun
źródło
10

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

choonkeat
źródło
jest niesamowity i działa również na urządzeniach mobilnych :)
latające owce
działa na IOS. przepraszam, nie mam dostępu do androida itp.?
choonkeat
1
to nie było pytanie, to była pochwała. to nie działa dobrze na moim android.
latające owce
5

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.

Alex
źródło
2

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>
Christoph Letmaier
źródło
Podaj przykład, a nie tylko link do jednego.
Wszyscy pracownicy są niezbędni
Zmieniłem odpowiedź, jak prosiłeś.
Christoph Letmaier
1
Wygląda teraz znacznie lepiej. Przy okazji, nie ma nic złego w linkowaniu do działającego przykładu lub źródła pokazującego przykład (może być całkiem pomocne). Jednak z czasem linki stają się nieważne, dlatego pożądane jest, aby zawsze podać niezbędne informacje w samej odpowiedzi (którą podałeś), nawet jeśli podano przydatne linki.
Wszyscy pracownicy są niezbędni
Ok, zrozumiałem ... :-) Zrobię co w mojej mocy, aby link był żywy ...
Christoph Letmaier
2

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:

wprowadź opis obrazu tutaj

mikemaccana
źródło
Uwaga dodatkowa, brak wsparcia dla IE9 i
starszych
1

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

Greg Franko
źródło
1

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

i10k
źródło
-1

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>
user3716078
źródło