mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-08-19 12:11:44 +02:00
Code Issues Releases Wiki Activity

select boxes

Browse Source
This commit is contained in:
Jordan Scales
2020-04-18 07:59:49 -04:00
parent 92932e64b0
commit 2e8d8cabf9
3 changed files with 40 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
dropdown-button-active.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H15H16V17H15H0V16V1V0ZM1 16H15V1H1V16Z" fill="#808080"/>
<rect x="1" y="1" width="14" height="15" fill="#C0C0C0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7H5V8H6V9H7V10H8V11H9V10H10V9H11V8H12V7Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 381 B

8
dropdown-button.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 0H0V1V16H1V1H15V0Z" fill="#DFDFDF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1H1V15H2V2H14V1H2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 17H15H0V16H15V0H16V17Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 1H14V15H1V16H14H15V1Z" fill="#808080"/>
<rect x="2" y="2" width="12" height="13" fill="#C0C0C0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 630 B

30
style.css
View File

@@ -37,8 +37,8 @@
--border-sunken-inner: inset -2px -2px var(--button-face), --border-sunken-inner: inset -2px -2px var(--button-face),
inset 2px 2px var(--button-shadow); inset 2px 2px var(--button-shadow);
/* Checkbox borders flip window-frame and button-shadow */ /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
--border-checkbox: inset -1px -1px var(--button-highlight), --border-field: inset -1px -1px var(--button-highlight),
inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face), inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
inset 2px 2px var(--window-frame); inset 2px 2px var(--window-frame);
} }
@@ -262,7 +262,7 @@ input[type="checkbox"] + label::before {
width: var(--checkbox-width); width: var(--checkbox-width);
height: var(--checkbox-width); height: var(--checkbox-width);
background: var(--button-highlight); background: var(--button-highlight);
box-shadow: var(--border-checkbox); box-shadow: var(--border-field);
margin-right: var(--radio-label-spacing); margin-right: var(--radio-label-spacing);
} }
@@ -290,3 +290,27 @@ input[type="checkbox"][disabled] + label::before {
input[type="checkbox"][disabled]:checked + label::after { input[type="checkbox"][disabled]:checked + label::after {
background: url("./checkmark-disabled.svg"); background: url("./checkmark-disabled.svg");
} }
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
position: relative;
padding: 3px 4px;
box-shadow: var(--border-field);
max-width: 120px;
background-color: var(--button-highlight);
height: 21px;
background-image: url("./dropdown-button.svg");
background-position: top 2px right 2px;
background-repeat: no-repeat;
}
select:focus {
outline: none;
}
select:active {
background-image: url("./dropdown-button-active.svg");
}