... auch das CSS in 2. ist richtig.
Beiträge von Sempervivum
-
-
Zitat
1. Sollte da jetzt nicht eine lachfarbene Fläche mit einen 2px blauen Rahmen zusehen sein? Ist es aber nicht!
Anscheinend hast Du das HTML oben im Screenshot nicht bemerkt:
Die beiden divs müssen drin sein, damit das zu sehen ist.
Zu 3.: Das CSS ist vollkommen richtig. Ein Selektor kann sowohl Tagnamen als auch Klassen als auch IDs enthalten (und noch mehr).
-
Zitat
Zweck der Sache ist: Das ich jede section für sich stylen kann ohne, dass es Auswirkung auf die gesamte Seite (css) hat.
Du hast ja den einzelnen Sections schon jeweils eine ID gegeben und ich habe für die neue "my-new-section" verwendet. Wenn Du die benutzt, kannst Du gezielt die Elemente ansprechen, die in der betr. Section liegen und alle anderen bleiben außen vor:
Wobei Du das main>section auch weg lassen kannst, weil es die ID ja nur ein Mal gibt.
-
Ich habe das mal im Seiteninspektor eingerichtet:
Und für die Container innerhalb dann dieses CSS:
Versuche es so und beobachte, wie es aussieht.
-
Ich hoffe, ich verstehe das richtig: Du willst, so wie in der Section "Über mich" einen weiteren Container einbauen und der soll zentriert sein? In dem Fall hättest Du ja statt des body die Section für die Unterseite und müsstest darin einen weiteren Container, z. B. ein div, einbauen und den zentrieren.
Allerdings kannst Du das dann wahrscheinlich auch, ohne diesen Zusatzcontainer, durch ein einfaches Padding für die Section erreichen (wenn ich an dein Bild oben denke).
-
Das ist eine Standardaufgabe und mit Flex sehr einfach zu machen: Du brauchst nur align-items: center; zusätzlich zum display:flex; für body.
-
Ich rate mal: Du willst die Section zentrieren, und zwar auch vertikal?
-
Zitat
Neugier und Altersspieltrieb
Das war auch bei mir eine Antriebsfeder
Es ist ja so, dass man so gut wie alle HTML-Elemente nach Belieben stylen kann, Farben, Ränder, Schatten, und und und. Das Select macht hier eine Ausnahme und häufig kommt die Frage auf, wie man es denn dort macht. Und es ist häufig so, dass man sich ein einheitliches und individuelles Erscheinungsbild wünscht und auch dabei steht einem dann das Select im Wege. Außerdem ist sein Erscheinungsbild vom Browser abhängig, noch etwas, das häufig unerwünscht ist.
Auch die Browserhersteller haben dieses Problem erkannt, wie Du in Posting #3 sehen kannst. Aber wahrscheinlich wird noch Zeit ins Land gehen, bis das etabliert ist.
Auslöser waren dann zwei Fragen in einem anderen Forum.
-
Update:
- Bei den Radiobuttons fehlten die Namen, fügt man sie hinzu, kann man problemlos mit den Pfeiltasten navigieren. Allerdings funktioniert das nur, wenn sie nicht durch das Attribute "hidden" unsichtbar gemacht werden sondern durch ein Klasse, die die Breite auf 0 setzt.
- Klasse "keep open" hinzu gefügt, diese hält das Select nach Auswahl einer Option sichtbar.
- Eventlistener nicht für window sondern für das aktuelle Select.
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <title>Stylable Select With Radiobuttons</title> <style> /* Begin stylable select */ stylable-select { position: relative; display: inline-block; font-family: Arial, Helvetica, sans-serif; } stylable-select stylable-select-options { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background-color: white; } stylable-select stylable-select-options.hidden { height: 0; overflow: hidden; } stylable-select input[type="radio"].hidden { width: 0; overflow: hidden; } stylable-select stylable-select-out::after { content: '▼'; } stylable-select stylable-select-out { min-width: 8em; display: flex; justify-content: space-between; border: 1px solid blue; padding-left: 0.2em; } stylable-select stylable-select-options label { border: 1px solid lightblue; } stylable-select label.selected { background-color: lightgray; } /* End stylable select */ /* Sample for custom styles: */ stylable-select stylable-select-options label { border: 2px solid darkgreen; border-radius: 2px; background-color: lightgreen; } stylable-select stylable-select-options label::before { content: '•'; margin-left: 0.2em; margin-right: 0.2em; } </style> <script> class StylableSelect extends HTMLElement { constructor() { super(); } connectedCallback() { this.addEventListener('click', event => { // Was the head of the select clicked? if (event.target.tagName.toLowerCase() == 'stylable-select-out') { // Give focus to the checked radiobutton again const rbChecked = this.querySelector('input[type="radio"]:checked') if (rbChecked) rbChecked.focus(); /* Toggle visibility of options */ this.querySelector('stylable-select-options') .classList.toggle('hidden'); } // Check if the clicked element is an option // (only options have a label) const lbl = event.target.closest('label'); if (lbl) { // Remove class "selected" at that label, // that had it previously const selectedLabel = this.querySelector('label.selected'); if (selectedLabel) selectedLabel.classList.remove('selected'); // Add class "selected" at clicked label lbl.classList.add('selected'); // Transfer text to output this.querySelector('stylable-select-out span').textContent = this.querySelector('label.selected').textContent; if (!this.classList.contains('keep-open')) { this.querySelector('stylable-select-options').classList.add('hidden'); } // Give focus to clicked radio button lbl.querySelector('input').focus(); } }); } getValueAndText() { const out = this.querySelector('stylable-select-out'), text = out.querySelector('span').textContent, value = this.querySelector('input:checked').value; return { value: value, text: text }; } } customElements.define("stylable-select", StylableSelect); </script> </head> <body> <button id="btn-out-val-1">Output Value 1</button> <button id="btn-out-val-2">Output Value 1</button> <!-- Begin stylable select --> <!-- Modify ID --> <stylable-select id="select1"> <stylable-select-out> <span>Select an option</span> </stylable-select-out> <stylable-select-options class="hidden"> <!-- Modify options or labels containing radio buttons --> <label><input type="radio" name="select1-rb" value="opt11" class="hidden">Option 1-1</label> <label><input type="radio" name="select1-rb" value="opt12" class="hidden">Option 1-2</label> <label><input type="radio" name="select1-rb" value="opt13" class="hidden">Option 1-3</label> <label><input type="radio" name="select1-rb" value="opt14" class="hidden">Option 1-4</label> </stylable-select-options> </stylable-select> <!-- End stylable select --> <!-- Begin stylable select --> <!-- Modify ID --> <stylable-select id="select2" class="keep-open"> <stylable-select-out> <span>Select an option</span> </stylable-select-out> <stylable-select-options class="hidden"> <!-- Modify options or labels containing radio buttons --> <label><input type="radio" name="select2-rb" value="opt21" class="hidden">Option 2-1</label> <label><input type="radio" name="select2-rb" value="opt22" class="hidden">Option 2-2</label> <label><input type="radio" name="select2-rb" value="opt23" class="hidden">Option 2-3</label> <label><input type="radio" name="select2-rb" value="opt24" class="hidden">Option 2-4</label> </stylable-select-options> </stylable-select> <!-- End stylable select --> <script> document.getElementById('btn-out-val-1').addEventListener('click', event => { console.log(document.getElementById('select1').getValueAndText()); }); document.getElementById('btn-out-val-2').addEventListener('click', event => { console.log(document.getElementById('select2').getValueAndText()); }); </script> </body> </html>
-
-
Ich habe das jetzt auf Custom-Elemente und connectedCallback umgestellt.
Funktioniert einwandfrei und das JS ist sogar ein wenig einfacher geworden.
Cool was man so alles machen und lernen kann.
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <title>Stylable Select With Radiobuttons</title> <style> /* Begin stylable select */ stylable-select { position: relative; display: inline-block; font-family: Arial, Helvetica, sans-serif; } stylable-select stylable-select-options { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background-color: white; } stylable-select stylable-select-options.hidden { display: none; } stylable-select stylable-select-out::after { content: '▼'; } stylable-select stylable-select-out { min-width: 8em; display: flex; justify-content: space-between; border: 1px solid blue; padding-left: 0.2em; } stylable-select stylable-select-options label { border: 1px solid lightblue; } stylable-select label.selected { background-color: lightgray; } /* End stylable select */ /* Custom styles: */ stylable-select stylable-select-options label { border: 2px solid darkgreen; border-radius: 2px; background-color: lightgreen; } stylable-select stylable-select-options label::before { content: '•'; margin-left: 0.2em; margin-right: 0.2em; } </style> <script> class StylableSelect extends HTMLElement { constructor() { // Always call super first in constructor super(); } connectedCallback() { window.addEventListener('click', event => { // Prüfen ob das geklickte Element ein Kind dieses Elementes ist */ const select = event.target.closest('stylable-select'); if (select == this) { /* Wurde der Kopf des Selects geklickt? */ if (event.target.tagName.toLowerCase() == 'stylable-select-out') { /* Sichtbarkeit der Optionen umschalten */ this.querySelector('stylable-select-options') .classList.toggle('hidden'); } // Prüfen ob das geklickte Element eine Option ist // (nur die Optionen haben ein Label) const lbl = event.target.closest('label'); if (lbl) { // Klasse "selected" löschen bei dem Label, // das sie bisher hatte const selectedLabel = this.querySelector('label.selected'); if (selectedLabel) selectedLabel.classList.remove('selected'); // Beim geklickten Label die Klasse "selected" hinzu fügen lbl.classList.add('selected'); // Wert und Text in die Ausgabefelder übertragen this.querySelector('input[name]').value = this.querySelector('label.selected input').value; this.querySelector('stylable-select-out span').textContent = this.querySelector('label.selected').textContent; this.querySelector('stylable-select-options').classList.add('hidden'); } } }); } getValueAndText() { const out = this.querySelector('stylable-select-out'), text = out.querySelector('span').textContent, value = out.querySelector('input').value; return { value: value, text: text }; } } customElements.define("stylable-select", StylableSelect); </script> </head> <body> <button id="btn-out-val-1">Output Value 1</button> <button id="btn-out-val-2">Output Value 1</button> <!-- Begin stylable select --> <!-- Modify ID --> <stylable-select id="select1"> <stylable-select-out> <span>Select an option</span> <!-- Modify name of input --> <input name="select1" value="" hidden> </stylable-select-out> <stylable-select-options class="hidden"> <!-- Modify options or labels containing radio buttons --> <label><input type="radio" value="opt11" hidden>Option 1-1</label> <label><input type="radio" value="opt12" hidden>Option 1-2</label> <label><input type="radio" value="opt13" hidden>Option 1-3</label> <label><input type="radio" value="opt14" hidden>Option 1-4</label> </stylable-select-options> </stylable-select> <!-- End stylable select --> <!-- Begin stylable select --> <!-- Modify ID --> <stylable-select id="select2"> <stylable-select-out> <span>Select an option</span> <!-- Modify name of input --> <input name="select2" value="" hidden> </stylable-select-out> <stylable-select-options class="hidden"> <!-- Modify options or labels containing radio buttons --> <label><input type="radio" value="opt21" hidden>Option 2-1</label> <label><input type="radio" value="opt22" hidden>Option 2-2</label> <label><input type="radio" value="opt23" hidden>Option 2-3</label> <label><input type="radio" value="opt24" hidden>Option 2-4</label> </stylable-select-options> </stylable-select> <!-- End stylable select --> <script> document.getElementById('btn-out-val-1').addEventListener('click', event => { console.log(document.getElementById('select1').getValueAndText()); }); document.getElementById('btn-out-val-2').addEventListener('click', event => { console.log(document.getElementById('select2').getValueAndText()); }); </script> </body> </html>
-
-
Da war noch ein Fehler drin: Eventlistener wurde mehrfach registriert wenn man mehrere Instanzen anlegt. Hier die korrigierte Klasse:
Code
Alles anzeigenclass StylableSelect { static isRegistered = false; constructor(selector) { this.selector = selector; if (!StylableSelect.isRegistered) { StylableSelect.isRegistered = true; window.addEventListener('click', event => { if (event.target.classList.contains('stylable-select-out')) { console.log('out clicked') event.target.closest('.stylable-select') .querySelector('.stylable-select-options') .classList.toggle('hidden'); } const lbl = event.target.closest('label:not(.stylable-select-out)'); let select = null; if (lbl) select = lbl.closest('.stylable-select'); if (select) { const selectedLabel = select.querySelector('label.selected'); if (selectedLabel) selectedLabel.classList.remove('selected') lbl.classList.add('selected'); select.querySelector('input[name]').value = select.querySelector('label.selected input').value; select.querySelector('.stylable-select-out span').textContent = select.querySelector('label.selected').textContent; select.querySelector('.stylable-select-options').classList.add('hidden'); } }); } } getValueAndText() { const out = document.querySelector(this.selector).querySelector('.stylable-select-out'), text = out.querySelector('span').textContent, value = out.querySelector('input').value; return { value: value, text: text }; } }
-
Wenn Du viel gelesen hast, hilft es wahrscheinlich auch nicht, einen weiteren Link zu posten. Häufig hilft ein Beispiel weiter, sieh dir dieses Codepen an:
nth-child nimmt alle Elemente her und prüft das 2-te. Ist es ein p-Element wird es genommen.
Die zweite Regel nimmt von allen Elementen das 2-te und prüft ob es ein h1- Element ist. Da es jedoch ein p-Element ist, passiert gar nichts.
nth-of-type nimmt nur die p-Elemente und nimmt davon das 2-te (die dritte Regel).
In den allermeisten Fälle tut nth-of-type das, was man möchte.
Das ganze ist schon ein wenig undurchsichtig und deshalb habe ich auch früher geschrieben, dass auch Klassen den Vorteil haben, dass es klarer ist, was passiert.
-
Die Klasse "item" kannst Du weg rationalisieren, indem Du den Kindselektor verwendest:
CSS/Selektoren/Kindselektor – SELFHTML-Wiki
Also:
-
-
Liebe Forengemeinde,
ein select zu stylen ist leider nur sehr eingeschränkt möglich. Ich kenne die Alternativen Select2 und Selectize, die sind hervorragend aber alles andere als leichtgewichtig. Daher bin ich daran gegangen und habe eine schlanke Alternative programmiert, mit der Einschränkung, dass Multi-Select nicht unterstützt wird.
Hier meine Demo:
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <title>Stylable Select With Radiobuttons</title> <style> /* Begin stylable select */ .stylable-select { position: relative; display: inline-block; font-family: Arial, Helvetica, sans-serif; } .stylable-select .stylable-select-options { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background-color: white; } .stylable-select .stylable-select-options.hidden { display: none; } .stylable-select .stylable-select-out::after { content: '▼'; } .stylable-select .stylable-select-out { min-width: 8em; display: flex; justify-content: space-between; border: 1px solid blue; padding-left: 0.2em; } .stylable-select .stylable-select-options label { border: 1px solid lightblue; } .stylable-select label.selected { background-color: lightgray; } /* End stylable select */ /* Custom styles: */ .stylable-select .stylable-select-options label { border: 2px solid darkgreen; border-radius: 2px; background-color: lightgreen; } .stylable-select .stylable-select-options label::before { content: '•'; margin-left: 0.2em; margin-right: 0.2em; } </style> </head> <body> <select> <option>Opt 1</option> <option>Opt 2</option> <option>Opt 3</option> <option>Opt 4</option> </select> <button id="btn-out-val">Output Value</button> <!-- Begin stylable select --> <!-- Modify ID --> <div class="stylable-select" id="select1"> <label class="stylable-select-out"> <span>Select an option</span> <!-- Modify name of input --> <input name="select1" value="" hidden> </label> <div class="stylable-select-options hidden"> <!-- Modify options or labels containing radio buttons --> <label><input type="radio" value="opt1" hidden>Option 1</label> <label><input type="radio" value="opt2" hidden>Option 2</label> <label><input type="radio" value="opt3" hidden>Option 3</label> <label><input type="radio" value="opt4" hidden>Option 4</label> </div> </div> <!-- End stylable select --> <script> class StylableSelect { constructor(selector) { this.selector = selector; window.addEventListener('click', event => { if (event.target.classList.contains('stylable-select-out')) { event.target.closest('.stylable-select') .querySelector('.stylable-select-options') .classList.toggle('hidden'); } const lbl = event.target.closest('label:not(.stylable-select-out)'); let select = null; if (lbl) select = lbl.closest('.stylable-select'); if (select) { const selectedLabel = select.querySelector('label.selected'); if (selectedLabel) selectedLabel.classList.remove('selected') lbl.classList.add('selected'); select.querySelector('input[name]').value = select.querySelector('label.selected input').value; select.querySelector('.stylable-select-out span').textContent = select.querySelector('label.selected').textContent; select.querySelector('.stylable-select-options').classList.add('hidden'); } }); } getValueAndText() { const out = document.querySelector(this.selector).querySelector('.stylable-select-out'), text = out.querySelector('span').textContent, value = out.querySelector('input').value; return { value: value, text: text }; } } aStylableSelect = new StylableSelect('#select1'); document.getElementById('btn-out-val').addEventListener('click', event => { console.log(aStylableSelect.getValueAndText()); }); </script> </body> </html>
Funktioniert sehr gut aber es wurde der Einwand laut, dass es aus dem Gesichtspunkt der Zugänglichkeit nicht optimal ist. Wie beurteilen das die Experten für dieses Thema?
Beste Grüße, Ulrich
-
Immer gern! Ich wünsche noch einen schönen Abend!
-
Ich habe zunächst mal im Seiteninspektor provisorisch den Zeilenabstand kräftig erhöht, damit das Scrolling aktiv wird:
Code.grid-container { display: grid; grid-template-columns: 1fr 3fr 8fr 3fr; gap: 1em; row-gap: 10vh; }
Dann für .modal-content die Höhe begrenzt, ebenfalls, damit das Scrolling greift, und die Elemente mit Flex angeordnet:
Code.modal-content { /* hier drüber wie bisher */ height: 70vh; display: flex; flex-direction: column; }
Und für .modal-body das Scrollen eingeschaltet durch overflow: auto;
Versuche mal ob dich das weiter bringt.
-
Im wesentlichen funktioniert das Scrolling ja, aber die Details ...
Stell das doch mal online, das hier https://my2.emess62.de ist keine Version mit Scrolling.