88 lines
2.7 KiB
CSS
88 lines
2.7 KiB
CSS
/* HTML5 Number polyfill | Jonathan Stipe | https://github.com/jonstipe/number-polyfill*/
|
|
div.number-spin-btn-container {
|
|
display: inline-block;
|
|
position: absolute;
|
|
vertical-align: middle;
|
|
margin: 0 0 0 3px;
|
|
padding: 0;
|
|
left: 69%;
|
|
top: 6px;
|
|
}
|
|
|
|
div.number-spin-btn {
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
border-width: 2px;
|
|
border-color: #ededed #777777 #777777 #ededed;
|
|
border-style: solid;
|
|
background-color: #eeeeee;
|
|
width: 1em;
|
|
font-size: 14px; }
|
|
div.number-spin-btn:hover {
|
|
/* added blue hover color */
|
|
background-color: rgb(85, 151, 221);
|
|
cursor: pointer; }
|
|
div.number-spin-btn:active {
|
|
border-width: 2px;
|
|
border-color: #5e5e5e #d8d8d8 #d8d8d8 #5e5e5e;
|
|
border-style: solid;
|
|
background-color: #999999; }
|
|
|
|
div.number-spin-btn-up {
|
|
border-bottom-width: 1px;
|
|
-moz-border-radius: 0px;
|
|
-webkit-border-radius: 0px;
|
|
border-radius: 0px;
|
|
font-size: 14px; }
|
|
div.number-spin-btn-up:before {
|
|
border-width: 0 0.3em 0.3em 0.3em;
|
|
border-color: transparent transparent black transparent;
|
|
top: 25%; }
|
|
div.number-spin-btn-up:active {
|
|
border-bottom-width: 1px; }
|
|
div.number-spin-btn-up:active:before {
|
|
border-bottom-color: white;
|
|
top: 26%;
|
|
left: 51%; }
|
|
|
|
div.number-spin-btn-down {
|
|
border-top-width: 1px;
|
|
-moz-border-radius: 0px 0px 3px 3px;
|
|
-webkit-border-radius: 0px 0px 3px 3px;
|
|
border-radius: 0px 0px 3px 3px; }
|
|
div.number-spin-btn-down:before {
|
|
border-width: 0.3em 0.3em 0 0.3em;
|
|
border-color: black transparent transparent transparent;
|
|
top: 75%; }
|
|
div.number-spin-btn-down:active {
|
|
border-top-width: 1px; }
|
|
div.number-spin-btn-down:active:before {
|
|
border-top-color: white;
|
|
top: 76%;
|
|
left: 51%; }
|
|
|
|
div.number-spin-btn-up:before,
|
|
div.number-spin-btn-down:before {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin: -0.15em 0 0 -0.3em;
|
|
padding: 0; }
|
|
|
|
input:disabled + div.number-spin-btn-container > div.number-spin-btn-up:active, input:disabled + div.number-spin-btn-container > div.number-spin-btn-down:active {
|
|
border-color: #ededed #777777 #777777 #ededed;
|
|
border-style: solid;
|
|
background-color: #cccccc; }
|
|
input:disabled + div.number-spin-btn-container > div.number-spin-btn-up:before, input:disabled + div.number-spin-btn-container > div.number-spin-btn-up:active:before {
|
|
border-bottom-color: #999999;
|
|
top: 25%;
|
|
left: 50%; }
|
|
input:disabled + div.number-spin-btn-container > div.number-spin-btn-down:before, input:disabled + div.number-spin-btn-container > div.number-spin-btn-down:active:before {
|
|
border-top-color: #999999;
|
|
top: 75%;
|
|
left: 50%; }
|