Jak niestandardowo ostylować dodatkowy element w <option>?

Hej!
Czy to prawda, że w elemencie OPTION elementu SELECT nie można stosować innych tagów HTML? To znaczy można, ale i tak nie będą uwzględniane.
Chciałbym w elemencie OPTION mieć jakiś tekst, a za nim w nawiasie liczbę, która ma być inaczej wystylowana. Robię więc:

<option value="1">Tekst <span class="ile_pl">(20)</span></option>

Niestety tag SPAN wydaje się być całkowicie ignorowany i efekt jest taki, jakbym wpisał:

<option value="1">Tekst <(20)</option>

Czy da się coś zrobić, aby tagi HTML w OPTION nie były ignorowane? Skąd w ogóle wzięły się takie dziwne restrykcje odnośnie tego taga OPTION?

Z góry dzięki za pomoc.

Select jest elementem renderowanm os-specific (browser specific). Nie da się go scustomizować poza prostą podmianą koloru.

Jeżeli chcesz mieć całkowicie customowy select, należy użyć rozwiązania które symuluje selecta przy pomocy komponentu JS (np Select2 https://select2.org/ ) albo w prostszych przypadkach ostylowanie pseudoelementów w CSS
https://www.w3schools.com/howto/howto_custom_select.asp

Cześć @Blackhole! Super że zadałeś pytanie

Blackhole napisał(a):

Czy da się coś zrobić, aby tagi HTML w OPTION nie były ignorowane?

Jeśli chcesz dodać stylowanie opcji w dropdownie, to najlepiej by było żeby ten dropdown nie był <select><option>, tylko np. <div> ze stylami, który też pokazuje drugi <div> kiedy się w niego kliknie.

Są gotowe takie dropdowny np. z biblioteki Bootstrap, albo można go napisać samemu, nie jest to jakieś mega trudne.

Blackhole napisał(a):

Skąd w ogóle wzięły się takie dziwne restrykcje odnośnie tego taga OPTION?

Prawdopodobnie z tego samego powodu czemu nie możesz dodać stylowania do elementów <input type="text"/>, <textarea>, <input type="checkbox"> - to dlatego że interfejs pomiędzy standardem HTML oraz przeglądarkami precyzuje, że te elementy mają być w dużej mierze zależne od urządzenia i systemu operacyjnego, na jakim się wyświetla element.

Dlatego możesz wpisać <button>, który na Windowsie będzie wyglądał jak przycisk windowsa, a na iPhone'ie jak przycisk iPhone'a.

Riddle napisał(a):

Skąd w ogóle wzięły się takie dziwne restrykcje odnośnie tego taga OPTION?

Prawdopodobnie z tego samego powodu czemu nie możesz dodać stylowania do elementów <input type="text"/>, <textarea>, <input type="checkbox"> - to dlatego że interfejs pomiędzy standardem HTML oraz przeglądarkami precyzuje, że te elementy mają być w dużej mierze zależne od urządzenia i systemu operacyjnego, na jakim się wyświetla element.

Dlatego możesz wpisać <button>, który na Windowsie będzie wyglądał jak przycisk windowsa, a na iPhone'ie jak przycisk iPhone'a.

Uważam to za absurd i utrudnianie życia ludziom.
Dzięki @opiszon i @Riddle za wskazówki do uzyskania rozwiązania.

Blackhole napisał(a):

Uważam to za absurd i utrudnianie życia ludziom.

Przeglądarki w ogóle mogłyby nie renderować <input/>, <select/> ani <textarea/>, wtedy każdy jeden komponent musiałbyś pisać samemu.

Zamiast wstawić <input/> musiałbyś pokazać pole, ramkę, obsłużyć eventy click/keydown/keyup, zaznaczanie tych elementów, focus (tab, shift+tab), blur. Przeglądarki dostarczają bardzo fajne narzędzie, które też jest spójne z tym co znają użytkownicy tego rozwiązania.

Fakt, ominęli kwestie stylowania tych elementów, no ale jak ktoś chce stylować te elementy, to równie dobrze już może napisać swoje.

Z góry zaznaczam, że to nie moje dzieło, tyko znalezione w necie - ale czy takie coś by nie spełniało Twoich oczekiwań?

https://jsfiddle.net/gz710Lyr/

<div class="custom-select">
  <div class="selected-option">Tekst (20)</div>
  <div class="options-list">
    <div class="option">Tekst <span class="ile_pl">(20)</span></div>
    <div class="option">Inny tekst <span class="ile_pl">(30)</span></div>
  </div>
</div>

<style>
  .custom-select {
    position: relative;
    display: inline-block;
  }

  .selected-option {
    padding: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
  }

  .options-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    border: 1px solid #ccc;
    background-color: white;
    z-index: 1000;
  }

  .option {
    padding: 10px;
    cursor: pointer;
  }

  .option:hover {
    background-color: #f0f0f0;
  }

  .selected-option:hover + .options-list,
  .options-list:hover {
    display: block;
  }

  .ile_pl {
    font-weight: bold;
    color: red;
  }
</style>

To backward compatibility standardu po prostu.
Trzeba z tym żyć i sobie radzić ;-)

cerrato napisał(a):

Z góry zaznaczam, że to nie moje dzieło, tyko znalezione w necie - ale czy takie coś by nie spełniało Twoich oczekiwań?

Ja bym nie szedł w to, bo to jest rozwiązanie tylko CSS (bez JS), i może dać pytającemu złudne wrażenie że da się zrobić pełnoprawny dropdown bez JS'a, a moim zdaniem się nie da.

Ale znalezisko @cerrato bardzo fajne. Jak ktoś nie chce robić normalnego dropdown, ale jest w stanie przyjąć taki biedny kompromis, to wtedy rozwiązanie tylko w CSS jest super! @cerrato

A co do przedmówcy, to raczej żadne backward compatiblity to nie jest. To jest raczej kompromis pomiędzy spójnym wyglądem elementów na różnych systemach, a autonomią UI poszczególnych serwisów. Myślę że gdyby HTML5 teraz zniknął, i zamiast niego wszedł HYPER1 markup language, to wytworzyłby bardzo podobne rozwiązanie - część stron chce mieć swoje stylowanie (zrobią customy), a część chce pasować do systemu (skorzystają z os-specific).

może dać pytającemu złudne wrażenie że da się zrobić pełnoprawny dropdown bez JS'a, a moim zdaniem się nie da.

W sumie taki temat do zastanowienia się, trochę offtop, ale że wypłynął na przykładzie tego wątku to można tutaj go poruszyć: co jest bardziej kompatybilne/uniwersalne/bezpieczniejsze: czy bazowanie na CSS, czy JS? Co obsługuje większa liczba urządzeń i przeglądarek? Co jest większa szansa, że będzie niewspierane? Co może spowodować problemy na jakiejś starej wersji przeglądarki albo na urządzeniu mobilnym. W sensie - nie mówię, żę takie bazowanie na JS jest złe, raczej się zastanawiam głośno: mając do wyboru robienie obejścia/prowizorki/hacka to lepiej bazować na CSS czy JS? Jak sądzicie?

cerrato napisał(a):

może dać pytającemu złudne wrażenie że da się zrobić pełnoprawny dropdown bez JS'a, a moim zdaniem się nie da.

W sumie taki temat do zastanowienia się, trochę offtop, ale że wypłynął na przykładzie tego wątku to można tutaj go poruszyć: co jest bardziej kompatybilne/uniwersalne/bezpieczniejsze: czy bazowanie na CSS, czy JS? Co obsługuje większa liczba urządzeń i przeglądarek? Co jest większa szansa, że będzie niewspierane? Co może spowodować problemy na jakiejś starej wersji przeglądarki albo na urządzeniu mobilnym. W sensie - nie mówię, żę takie bazowanie na JS jest złe, raczej się zastanawiam głośno: mając do wyboru robienie obejścia/prowizorki/hacka to lepiej bazować na CSS czy JS? Jak sądzicie?

Intencja dobra, ale pytanie co jest bardziej kompatybilne/uniwersalne/bezpieczniejsze chyba idzie w złą stronę.

Autor chce zrobić kontrolkę dropdown ze stylowaniem. Co będzie chciał zrobić potem? Pewnie inne kontrolki, plus może też dodatkowe feature'y do dropdownów (obsługa klawaiturą, search, etc.). Pomysł z dropdownem tylko w CSS jest super; ale praktycznie zamyka drogę na cokolwiek innego. Nie widzę opcji że możnaby jakkolwiek rozszerzyć ten dropdown o dowolną funkcjonalność bez JS.

Także:

• Jeśli autor chce tylko taki biedny dropdown - CSS jaknajbardziej w porządku
• Jeśli autor chce dodać chociaż minimum dodatkowej funkcjonalności - wtedy bez JS się i tak nie da, więc lepiej od razu w to wejść.

Riddle napisał(a):

Prawdopodobnie z tego samego powodu czemu nie możesz dodać stylowania do elementów <input type="text"/>, <textarea>, <input type="checkbox"> - to dlatego że interfejs pomiędzy standardem HTML oraz przeglądarkami precyzuje, że te elementy mają być w dużej mierze zależne od urządzenia i systemu operacyjnego, na jakim się wyświetla element.

Da się checkboxy stylować:

input[type=checkbox] {
  appearance:none;
  background: grey;
  border-radius: 4px;
  width: 30px;
  height:30px;
}

input[type=checkbox]:checked {
    background: green;
    box-shadow: 0 0 3px 4px rgb(100 255 100 / 0.5);
}

https://jsfiddle.net/z9vfwtsb/
https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

Dlatego możesz wpisać <button>, który na Windowsie będzie wyglądał jak przycisk windowsa, a na iPhone'ie jak przycisk iPhone'a.

buttony oczywiście też, ale stylowanie buttonów czy input textów albo textarea wydaje się bardziej oczywiste.

LukeJL napisał(a):

Da się checkboxy stylować:

Źle się wyraziłem.

Oczywiście stylowanie samych tych elementów jest możliwe, ale wypłynięcie w bardziej substancjalny sposób na nie już możliwe nie jest - np. zmienić kursor z pionowej kreski na dwie, właśnie dodać element html do <option>, czy na tą sprawę do <input>a też.

Nie da rady zrobić czegoś takiego: <input value="<span>X</span>Y"/>, dokładnie tak samo jak z <option> w <select>.

Także faktycznie @LukeJL część rzeczy da się stylować, ale nie mamy nad nimi takiej kontroli jak nad komponentami które napisalibyśmy sami na <div>'ach.

Autor chce zrobić kontrolkę dropdown ze stylowaniem. Co będzie chciał zrobić potem? Pewnie inne kontrolki, plus może też dodatkowe feature'y do dropdownów (obsługa klawaiturą, search, etc.). Pomysł z dropdownem tylko jak CSS jest super; ale praktycznie zamyka drogę na cokolwiek innego. Nie widzę opcji że możnaby jakkolwiek rozszerzyć ten dropdown o dowolną funkcjonalność bez JS.

Tak, wiem że to jest takie rozwiązanie połowiczne. Przy wielu różnego typu elementach da się COŚ zmienić i ostylować, ale każdy będzie wyglądał inaczej, będzie brak spójności i wrażenia, że masz przed sobą spójny system, a nie zbiór kontrolek - każda inna.

Mi chodziło o dwie rzeczy:

• że da się z grubsza osiągnąć to, o czym OP pisał, przy czym to jest ok patrząc na temat lokalnie, tylko z perspektywy jednej kontrolki
• taka myśl mi przyszła, na czym jest lepiej bazować/co jest bardziej uniwersalne - JS czy CSS. Ale w sumie to dość mocny offtop, chyba rzeczywiście nie ma co go tutaj ciągnąć.

cerrato napisał(a):

Mi chodziło o dwie rzeczy:

• że da się z grubsza osiągnąć to, o czym OP pisał, przy czym to jest ok patrząc na temat lokalnie, tylko z perspektywy jednej kontrolki

Tak.

cerrato napisał(a):

• taka myśl mi przyszła, na czym jest lepiej bazować/co jest bardziej uniwersalne - JS czy CSS. Ale w sumie to dość mocny offtop, chyba rzeczywiście nie ma co go tutaj ciągnąć.

To pytanie byłoby super, gdyby dropdown dało się osiągnąć zarówno w JS i CSS.

Ale niestety się nie da (w CSS zrobisz tylko mega mega okrojną, prawie że prymitywną wersję i nic ponadto).

Z tego co pamiętam to z <option>'ami był problem, bo żeby je pokolorować to trzeba było każdy <option> odzielnie stylować. Dla obecnych komputerów to nie problem ale patrząc z pozycji C to ogrom marnowanych bajtów.

Tu coś piszą o customowym stylowaniu elementów formularzy (również piszą o select)
https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling

Blackhole napisał(a):

Czy da się coś zrobić, aby tagi HTML w OPTION nie były ignorowane? Skąd w ogóle wzięły się takie dziwne restrykcje odnośnie tego taga OPTION?

Zapewne stąd, że przeglądarka może uzywać komponentu listy rozwijanej dostarczanej przez OS/nakładkę graficzną, który najczęściej nie obsługuje zaawansowanego formatowania opcji.

Z tego co wiem, w większości przeglądarek powinno działać stylowanie samych opcji, np. nadanie im koloru tła. Jeśli chodzi o formatowanie części tekstu opcji, to może być gorzej (chociaż jestem zaskoczony że najnowsze przeglądarki tego nie umożwliwiają). Tak jak pisali inni, użyj własnego komponentu listy rozwijanej, ale zrób to tak, żeby użytkownicy których przeglądarki sobie z nim nie poradzą nie mieli problemu. Najlepiej umieść w formularzu tradycyjny <SELECT> i dodaj skrypt JS który go wywali i wstawi ten własny, lepszy. W ten sposób, jeżeli skrypt się nie wykona, to na stronie pozostanie zwykła lista rozwijana umożliwiająca wypełnienie i wysłanie formularza.

Można własny dropbox options zrobić używając css i javascript, chyba ktoś to napisał wyżej, anyway wyślę.

Miałem na myśli dropdown, ale jestem przechlany.