Mam liste ul li z latami i miesiacami. Jak moge przy uzyciu CSS wystylizowac obie listy, zeby wygladaly jak dropdown (select -> option)? Nie jestem gosciem od CSS, ale musze niestety to zrobic. A nie wyglada na jakis super banal.
0
0
Wpisz w Google "html css how to make dropdown".
2
A czemu w ogóle chcesz to zrobić w ten sposób zamiast użyć gotowego komponentu?
Nie brzmi to prosto, na szybko nawet nie wyobrażam sobie zrobienia tego bez javascriptu - choćby pokazanie wybranej pozycji w zamkniętym dropdownie. Teoretycznie do zrobienia różnymi sztuczkami i ukrytymi checkboxami, ale rozumiem że nie chcesz modyfikować HTMLa w ogóle?
0
Pracuje na dosc legacy projekcie. Zbudowanym na Yii 2. Plan jest taki, ze apke trzeba juz stawiac na nowo, pewnie w Laravel. Tylko, ze UI tez jest mega stare. Nie chcemy nie wiadomo ile czasu spedzic nad nia. Wiec po prostu robimy update calego UI, komponent za komponentem. Te dropdown list sa z jQuery UI date picker.. Mamy juz gotowe fajne desing w Figmie. Szczerze, nie chce mi sie przerabic tych select i option bo to mega duzo roboty. Ale tak sobie zazyczyli i tak ma byc. Nic nie poradze. Listy juz mam zrobione, ale wlasnie widze, ze troche JS bede musial uzyc, zeby te dropdown pokazac i schowac. I tak samo z tym selected bedzie zabawy. Wydaje sie do ogarniecia, ale musze ustawic sobie w glowie jak to zrobic. Takie zycie.
HTML juz zmienilem. Date picker uzywa select i options to zmienilem na liste. Sama lista to cos takiego:
<div id="ui-dropdown-years">
<span class="selected-year">Select Year</span>
<ul class="ui-datepicker-years">
<li value="2029">2029</li>
<li value="2030">2030</li>
<li value="2031">2031</li>
<li value="2032">2032</li>
<li value="2033">2033</li>
<li value="2034">2034</li>
<li value="2035">2035</li>
<li value="2036">2036</li>
<li value="2037">2037</li>
<li value="2038">2038</li>
<li value="2039">2039</li>
<li value="2040">2040</li>
<li value="2041">2041</li>
<li value="2042">2042</li>
<li value="2043">2043</li>
<li value="2044">2044</li>
</ul>
</div>
1
Jeżeli chcesz z samych ul i li zrobić selecta i to w dodatku samym CSSem to to raczej nie wyjdzie. Można to obładować odrobiną JS i coś tam wydłubać pozostawiając istniejący markup... ale jak ma być prosto i szybko, a nie możesz ruszać html, to może możesz wstrzyknąć jednak JS? Stwórz po prostu element <select> na podstawie tego, co znajdziesz w ul, li?
0
dzek69 napisał(a):
Jeżeli chcesz z samych
ulilizrobićselecta i to w dodatku samym CSSem to to raczej nie wyjdzie. Można to obładować odrobiną JS i coś tam wydłubać pozostawiając istniejący markup... ale jak ma być prosto i szybko, a nie możesz ruszać html, to może możesz wstrzyknąć jednak JS? Stwórz po prostu element<select>na podstawie tego, co znajdziesz wul, li?
Sorry, zrobilem juz w piatek wszystko. Wyglada spoko, dziala dobrze. Musze przetestowac dokladnie w Poniedzialek. Wymagalo to troche JS, jakos nie duzo, ale troche linijek kodu jest. Ogarnalem w jakies 1,5 - 2 dni. Troche pracy przy tym jest. Same CSS to troche zabawy. Troche czulem jak bym wymyslal kolo na now. Oganiete to najwazniejsze. Dzieki za pomoc.
1
@cerrato zakładając, że faktycznie chcemy tylko przerobić li na selecta, to wygląda to tak (wraz z kodem HTML, który nie wygląda na poprawny (li nie przyjmuje atrybutu value), ale takie coś podał @poniatowski):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="ui-dropdown-years">
<span class="selected-year">Select Year</span>
<ul class="ui-datepicker-years">
<li value="2029">2029</li>
<li value="2030">2030</li>
<li value="2031">2031</li>
<li value="2032">2032</li>
<li value="2033">2033</li>
<li value="2034">2034</li>
<li value="2035">2035</li>
<li value="2036">2036</li>
<li value="2037">2037</li>
<li value="2038">2038</li>
<li value="2039">2039</li>
<li value="2040">2040</li>
<li value="2041">2041</li>
<li value="2042">2042</li>
<li value="2043">2043</li>
<li value="2044">2044</li>
</ul>
</div>
<script>
const ul = document.querySelector('.ui-datepicker-years');
const options = Array.from(ul.children).map(li => {
const option = document.createElement('option');
option.value = li.getAttribute('value');
option.textContent = li.textContent;
return option;
});
const select = document.createElement('select');
select.append(...options);
ul.replaceWith(select);
</script>
</body>
</html>
Licząc minutę na jedną linię kodu to jest 11 minut roboty 
0
dzek69 napisał(a):
@cerrato zakładając, że faktycznie chcemy tylko przerobić li na selecta, to wygląda to tak (wraz z kodem HTML, który nie wygląda na poprawny (
linie przyjmuje atrybutuvalue), ale takie coś podał @poniatowski):
jQuery UI date picker uzywa select tag, nie listy. Wiec zmiana byla z select na liste. Po drugie ja ta liste musialem pozniej wystylizowac w CSS. Do tego napisalem obluge tej listy w JS. To troche zajmuje czasu.
0
poniatowski napisał(a):
jQuery UI date picker uzywa
selecttag, nie listy. Wiec zmiana byla zselectna liste. Po drugie ja ta liste musialem pozniej wystylizowac w CSS. Do tego napisalem obluge tej listy w JS. To troche zajmuje czasu.
Wiem że już po temacie ale dalej nie rozumiem wymagań, zakładając że coś ci generuje ten html jako listę to czemu po prostu nie zamienić listy na select używając javascript zamiast robić udawany dropdown?
0
jQuery UI Date picker zbudowany jest na select tagach. HTML tagi tj select czy option maja ograniczenia co do uzywac CSS. Nie wystylizujesz option tag jak byc chcial. Do tego celu musialem zmienic select na ul, a option na li.
1
poniatowski napisał(a):
Wiec zmiana byla z
selectna liste.
Hm. No to czytaj swoje własne posty przed publikacją i analizuj je z perspektywy osoby, która nie wie kompletnie co robisz.
Cytując Twoją pierwszą wiadomość:
Mam liste ul li z latami i miesiacami. Jak moge przy uzyciu CSS wystylizowac obie listy, zeby wygladaly jak dropdown (select -> option)?
Przecież tu napisałeś prawie coś kompletnie odwrotnego. W skrócie czytając: mam już ul>li, chcę mieć select>option. Wspominasz o stylizowaniu w CSS, ale nie o kompletnej customizacji, tylko tu brzmi jak "wizualny trick, żeby ul>li lista wyglądała jak select". Potem dodajesz:
Date picker uzywa select i options
(i ponownie nawet w swojej ostatniej wypowiedzi)
jQuery UI date picker uzywa
selecttag, nie listy.
Co sugeruje, że to właśnie select jest Twoim celem, tak jak ten date picker.
A dopiero po trzykrotnym przeczytaniu całości rozumiem, że ty NIE CHCESZ jQuery UI date picker.
Podsumowując: dobrze zadane pytanie przyśpieszy uzyskanie odpowiedzi