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