1
0
mirror of synced 2024-11-26 14:56:07 +03:00
select2/dist/css/select2.css
Kevin Brown cdfa0499f4 Accessibility matches better
Now the accessibility for the single select box better matches what
is picked up for a native select.

This fixes an issue with us always setting `aria-activedescendant`,
which caused Orca to always say the full path to the selected
result, instead of saying that the box was a combobox with a
selection. This means that the `aria-activedescendant` attribute
will now only be set when the dropdown is open.

This also switches the results list from a listbox to a tree, which
is what Firefox tells screen readers that a standard select is.
Combined with a change to use `role=group` and `aria-label` for
option group labels, screen readers will now announce the group
that they are in as well.
2014-10-21 21:44:00 -04:00

195 lines
6.4 KiB
CSS

.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle; }
.select2-container .selection .single-select {
box-sizing: border-box;
cursor: pointer;
display: block;
height: 28px;
user-select: none;
-webkit-user-select: none; }
.select2-container .selection .single-select .rendered-selection {
display: block;
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis; }
.select2-container .selection .multiple-select {
box-sizing: border-box;
cursor: pointer;
display: block;
min-height: 32px;
user-select: none;
-webkit-user-select: none; }
.select2-container .selection .multiple-select .rendered-selection {
display: block;
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis; }
.select2-container .dropdown {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
display: block;
position: absolute;
left: -100000px;
width: 100%;
z-index: 100; }
.select2-container .dropdown .search {
display: block;
padding: 4px; }
.select2-container .dropdown .search input {
outline: 0;
padding: 4px;
width: 100%; }
.select2-container .dropdown .results {
display: block; }
.select2-container .dropdown .results .options {
list-style: none;
margin: 0;
padding: 0; }
.select2-container .dropdown .results .options .option {
padding: 6px;
user-select: none;
-webkit-user-select: none; }
.select2-container .dropdown .results .options .option[aria-selected] {
cursor: pointer; }
.select2-container.open .dropdown {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
left: 0; }
.select2-container.select2-theme-default .selection .single-select {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px; }
.select2-container.select2-theme-default .selection .single-select .rendered-selection {
color: #444;
line-height: 28px; }
.select2-container.select2-theme-default .selection .single-select .rendered-selection .placeholder {
color: #999; }
.select2-container.select2-theme-default .selection .multiple-select {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px; }
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection {
list-style: none;
margin: 0;
padding: 5px;
padding-bottom: 0; }
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .placeholder {
color: #999;
float: left; }
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
padding: 0 5px; }
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove {
color: #999;
display: inline-block;
font-weight: bold;
margin-right: 2px; }
.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove:hover {
color: #333; }
.select2-container.select2-theme-default.open .selection .single-select, .select2-container.select2-theme-default.open .selection .multiple-select {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.select2-container.select2-theme-default .dropdown .search input {
border: 1px solid #aaa; }
.select2-container.select2-theme-default .dropdown .results > .options {
max-height: 200px;
overflow-y: auto; }
.select2-container.select2-theme-default .dropdown .results .options .option[role=group] {
padding: 0; }
.select2-container.select2-theme-default .dropdown .results .options .option[role=group] .group-label {
cursor: default;
display: block;
padding: 6px; }
.select2-container.select2-theme-default .dropdown .results .options .option[aria-disabled=true] {
color: #999; }
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected=true] {
background-color: #ddd; }
.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected].highlighted {
background-color: #5897fb;
color: white; }
.s2-container {
margin: 0;
position: relative;
zoom: 1;
vertical-align: middle; }
.s2-container.s2-active {
border: 1px solid #5897fb;
border-top: bottom; }
.s2-container .s2-single-select {
display: block;
height: 26px;
padding: 0 0 0 8px;
overflow: hidden;
position: relative;
border: 1px solid #aaa;
white-space: nowrap;
line-height: 26px;
color: #444;
text-decoration: none;
border-radius: 4px;
background-clip: padding-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #fff;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
background-image: linear-gradient(to top, #eee 0%, #fff 50%); }
.s2-container .s2-single-select .s2-selection {
margin-right: 26px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
.s2-container .s2-open .select2-container-active .select2-choice, .s2-container .s2-open .select2-container-active .select2-choices {
border: 1px solid #5897fb;
outline: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
.s2-search input {
-webkit-box-sizing: border-box;
/* webkit */
-moz-box-sizing: border-box;
/* firefox */
box-sizing: border-box;
/* css3 */ }
.s2-dropdown {
width: 100%;
margin-top: -1px;
position: absolute;
z-index: 9999;
overflow: scroll;
background: #fff;
color: #000;
border: 1px solid #5897fb;
border-top: none;
border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); }
.s2-hidden {
display: none; }