Select componentAvailable since EcoComposer 2.2
Classical select example, needs JS (for now) to update the main shown value :
Classical multiple select example :
The default values are :
label-padding : .5rem * theming.$font-size 1rem * theming.$font-size,
label-first : false,
print : false,
select--font-family : theming.$font-family,
select--font-size : 1.6rem * theming.$font-size,
select--list--background-color : 'select--list--background-color',
select--list--background-image : 'select--list--background-image',
select--list--border : 'select--list--border',
select--list--border-radius : .5rem * theming.$font-size,
select--list--box-shadow : 'select--list--box-shadow',
select--value--background-color : null,
select--value--background-image : 'select--value--background-image',
select--value--border : 'select--value--border',
select--value--border-radius : .5rem * theming.$font-size,
select--value--box-shadow : 'select--value--box-shadow',
select--value--color : 'select--value--color',
select--value--label--color : 'select--value--label--color',
select--item--color : 'select--item--color',
select--item--hover--background-color : null,
select--item--hover--background-image : 'select--item--hover--background-image',
select--item--hover--color : 'select--item--hover--color',
suffix : '',
themes : (
light : (
default--select--list--background-color : #eee,
default--select--list--background-image : none,
default--select--list--border : none,
default--select--list--box-shadow : .1rem * theming.$font-size .2rem * theming.$font-size .4rem * theming.$font-size #aaa,
default--select--value--background-color : none,
default--select--value--background-image : linear-gradient(45deg, #e5e5e5 30%, #eee),
default--select--value--border : none,
default--select--value--box-shadow : .1rem * theming.$font-size .2rem * theming.$font-size .2rem * theming.$font-size #666,
default--select--value--color : #333, // Option selected ▼︎ (The arrow)
default--select--value--label--color : #111, // Option selected ▼︎ (The text)
default--select--item--color : inherit,
default--select--item--hover--background-color : none,
default--select--item--hover--background-image : linear-gradient(45deg, #faa, #aaf),
default--select--item--hover--color : #111
),
dark : (
default--select--list--background-color : #333,
default--select--list--background-image : none,
default--select--list--border : none,
default--select--list--box-shadow : .1rem * theming.$font-size .2rem * theming.$font-size .4rem * theming.$font-size #aaa,
default--select--value--background-color : none,
default--select--value--background-image : linear-gradient(45deg, #ccc 30%, #eee),
default--select--value--border : none,
default--select--value--box-shadow : .1rem * theming.$font-size .2rem * theming.$font-size .2rem * theming.$font-size #666,
default--select--value--color : #333, // Option selected ▼︎ (The arrow)
default--select--value--label--color : #111, // Option selected ▼︎ (The text)
default--select--item--color : inherit,
default--select--item--hover--background-color : none,
default--select--item--hover--background-image : linear-gradient(45deg, #900, #994c00 70%),
default--select--item--hover--color : #111
)
) We can implement it that way :
@include select.init();
@include select.create(
(
label-first : true,
suffix : '-2'
)
); We can implement it that way :
Simple select
<div class="select select-container">
<button type=button role=select class="select select-value">
<span class="select select-value--label">Selected option</span>
<span>▼︎</span>
</button>
<div class="select select-list">
<input type=radio role=menuitem id=chk-first-option name=select-radio
class="select select-item--activator" value="first value" checked=checked/>
<label for=chk-first-option class="select select-item--label">Selected option</label>
<input type=radio role=menuitem id=chk-second-option name=select-radio
class="select select-item--activator" value="second value"/>
<label for=chk-second-option class="select select-item--label">Second option</label>
</div>
</div> Classical multiple select example
(-2is a suffix)
<div class="select select-container">
<button type=button role=select class="select-2 select-value" aria-labelledby=select-value--label>
<span id=select-value--label class="select-2 select-value--label">Selected option</span>
<span>▼︎</span>
</button>
<div class="select select-list">
<label for=radio-first-option class="select-2 select-item--label">Selected option</label>
<input type=checkbox role=menuitem id=radio-first-option
class="select-2 select-item--activator" value="first value" checked=checked />
<label for=radio-first-option class="select-2 select-item--label">Selected option</label>
<input type=checkbox role=menuitem id=radio-second-option
class="select-2 select-item--activator" value="second value" />
</div>
</div>