<!-- Standard -->
<select class="select" id="select-ba63" name="select-ba63">
<option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
<option value="Option 1 value" id="option1Id">Option 1</option>
<option value="Option 2 value" id="option2Id">Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.</option>
<option value="Option 3 value" id="option3Id">Option 3</option>
</select>
<!-- Ohne Rand -->
<select class="select select--borderless" id="select-06b7" name="select-06b7">
<option value="Option 1 value" id="option1Id">Option 1</option>
<option value="Option 2 value" id="option2Id">Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.</option>
<option value="Option 3 value" id="option3Id">Option 3</option>
</select>
<!-- Deaktiviert -->
<select class="select" id="select-cca8" name="select-cca8" disabled="disabled">
<option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
<option value="Option 1 value" id="option1Id">Option 1</option>
<option value="Option 2 value" id="option2Id">Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.</option>
<option value="Option 3 value" id="option3Id">Option 3</option>
</select>
<!-- Invalide -->
<select class="select" required="required" id="select-4237" name="select-4237" aria-invalid="true">
<option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
<option value="Option 1 value" id="option1Id">Option 1</option>
<option value="Option 2 value" id="option2Id">Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.</option>
<option value="Option 3 value" id="option3Id">Option 3</option>
</select>
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
attr.id = id || attr.id || `select-${randomString()}`;
attr.name = name || attr.name || attr.id;
//- Process options
if (disabled) {
attr.disabled = true;
}
if (invalid) {
attr['aria-invalid'] = 'true';
}
if (borderless) {
attr.class.push('select--borderless');
}
if (size) {
attr.class.push(`select--${size}`);
}
//- Render atom
select.select(required=required)&attributes(attr)
if hasPleaseSelectOption
option.select__hint(disabled, selected, value='') Auswählen
if options
for option, optionIndex in options
-
//- Prepare option attributes
optionAttr = option.attr || {}
//- Selected option
if (optionIndex === selectedOption) optionAttr['selected'] = 'selected';
if (option.id) optionAttr.id = option.id;
if option.value
option(value=option.value)&attributes(optionAttr) #{option.text}
else
option&attributes(optionAttr) #{option}
/* Standard */
{
"hasPleaseSelectOption": true,
"options": [
{
"text": "Option 1",
"value": "Option 1 value",
"id": "option1Id"
},
{
"text": "Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.",
"value": "Option 2 value",
"id": "option2Id"
},
{
"text": "Option 3",
"value": "Option 3 value",
"id": "option3Id"
}
]
}
/* Ohne Rand */
{
"hasPleaseSelectOption": null,
"options": [
{
"text": "Option 1",
"value": "Option 1 value",
"id": "option1Id"
},
{
"text": "Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.",
"value": "Option 2 value",
"id": "option2Id"
},
{
"text": "Option 3",
"value": "Option 3 value",
"id": "option3Id"
}
],
"borderless": true
}
/* Deaktiviert */
{
"hasPleaseSelectOption": true,
"options": [
{
"text": "Option 1",
"value": "Option 1 value",
"id": "option1Id"
},
{
"text": "Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.",
"value": "Option 2 value",
"id": "option2Id"
},
{
"text": "Option 3",
"value": "Option 3 value",
"id": "option3Id"
}
],
"disabled": true
}
/* Invalide */
{
"hasPleaseSelectOption": true,
"options": [
{
"text": "Option 1",
"value": "Option 1 value",
"id": "option1Id"
},
{
"text": "Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.",
"value": "Option 2 value",
"id": "option2Id"
},
{
"text": "Option 3",
"value": "Option 3 value",
"id": "option3Id"
}
],
"invalid": true,
"required": true
}
export default class Select {
constructor($el) {
this.$el = $el;
this.initEvents();
this.initSelected();
}
initEvents() {
this.$el.addEventListener('change', () => {
this.addSelected();
});
}
initSelected() {
if (this.$el.selectedIndex !== 0) this.addSelected();
}
addSelected() {
this.$el.classList.add('select--selected');
}
}
// Initialize Select
document
.querySelectorAll('.select')
.forEach($el => new Select($el));
// Select settings
$default-select-size: 4.5rem;
$default-select-font-size: 1.7rem;
// Select styles
.select {
@mixin select-svg($color: $color-steelgrey-xdark) {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6" width="10" height="6"><path fill="' + $color + '" fill-rule="evenodd" d="M4.96 3.54L1.7.3C1.33-.1.7-.1.3.3-.1.67-.1 1.3.3 1.7l3.95 3.96c.4.4 1.02.4 1.4 0L9.63 1.7c.4-.38.4-1.02 0-1.4-.4-.4-1.02-.4-1.4 0L4.95 3.53z"/></svg>');
}
$calc-padding: calc((#{$default-input-size} - #{$root-line-height} * #{$default-input-font-size}) / 2 - 1px);
@include select-svg();
appearance: none;
background-color: #fff;
background-position: calc(100% - 1rem - 1px) 50%;
background-repeat: no-repeat;
background-size: 10px 6px;
border: 1px solid $color-anthracite;
border-radius: 3px;
color: $color-steelgrey-xdark;
cursor: pointer;
display: block;
font-size: $default-select-font-size;
font-weight: normal;
height: $default-select-size;
line-height: $root-line-height;
max-width: 100%;
padding: $calc-padding 3rem $calc-padding 1rem;
position: relative;
text-overflow: ellipsis;
transition-duration: $default-transition-duration;
transition-property: border-color;
width: 100%;
option {
color: $root-color;
}
// Hide select arrow on IE10+
&::-ms-expand {
display: none;
}
// Focus, Hover
&:hover,
&:focus {
border-color: $color-steelgrey-xdark;
outline: 0;
}
// Disabled as last to override hover/focus styles
&[disabled] {
border-color: $color-steelgrey;
color: $color-steelgrey-dark;
}
// Remove outline on invalid
&:invalid {
box-shadow: none;
}
// Invalid
&[aria-invalid='true'] {
@include select-svg($color-red);
background-color: rgba($color-red, 0.2);
border-color: $color-red;
color: $color-red;
}
}
.select--selected {
color: $root-color;
}
.select--small {
max-width: 35.5rem;
}
.select--borderless {
border: 0;
}
// .select__hint {
// display: none;
// }
There are no notes for this item.