joywok-material-components/components/pagination/style/inputPagination.css

<h1 align="center"> Joywok Material Components </h1>

.jw-input-pagination {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-top: 50px;
  text-align: center;
  font-size: 12px;
}
.jw-input-pagination .jw-button {
  display: inline-block;
  vertical-align: middle;
}
.jw-input-pagination .jw-button button {
  background: #fff;
  border-radius: 3px;
}
.jw-input-pagination .jw-button button i {
  vertical-align: middle;
}
.jw-input-pagination .jw-input-pagination-start,
.jw-input-pagination .jw-input-pagination-end {
  border: 1px solid #e7e7e7;
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 15px;
  min-width: 0;
  padding: 0;
  text-align: center;
}
.jw-input-pagination .jw-input-pagination-start i,
.jw-input-pagination .jw-input-pagination-end i {
  display: inline-block;
  width: 6px;
  height: 11px;
}
.jw-input-pagination .jw-input-pagination-start:hover,
.jw-input-pagination .jw-input-pagination-end:hover {
  border-color: #3297FC;
}
.jw-input-pagination .jw-input-pagination-start i {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAYCAYAAADKx8xXAAAAAXNSR0IArs4c6QAAAcVJREFUOBG1lM9LAkEUx92VBaUIiqKIgjKChIJAugQbK3SJDmGQh6AIOliXrpp68JDsCt06dQuCDtJJCJTMcNP+Bu/dKujo0tpu3yeM5K6uIjQwzo/3PvN9b/aNLtd/t1QqNYw+w3R4NnEaAYzU6/WCpmkviURilnx7grFYbBRAEb7r6DVBED56glAaN02zhL7GcVzO4/HsYE8jkKOfTi0ej08ahlEEtAz7vc/n249EIjrz7Qji1GmE9wRoCY53gUDgMBwO/zCIRluOlDygMkEI78br9R5YIQLbFJPJ5Hyj0aCc5mC7VhTlFLBJjtbWUgS0qOu6ShDP81eZTOakG0SHNEFAfiiVsaYPfCnL8hkZnZo7Go2u4PZKcJqC0gXCO3cCmK0VKtvod3RXq9X3YDD4gNx20bdFURyqVCqPvQ5wk4Oqqp+SJOUQcgjLLcBjgPNO8MCfow0kBSoA3PAzpgtUAKjPY1SSYVW3XU46nX5DtWwAqiHnIzyn22w220zpL2xTZMaBipzB9KygSDe8igjoWe1h75vsXRUZTA8Z8wLCpjeZBxwCrNlyZAAbUUlfcN7E+hXdj3qeYLa+Rqi0/Vn1BXVy+gXeXNEIguj0iAAAAABJRU5ErkJggg==);
  background-size: cover;
}
.jw-input-pagination .jw-input-pagination-start:hover i {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAYAAACulacQAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAB6ADAAQAAAABAAAADAAAAACmhu5HAAAAq0lEQVQYGWNgwAEsV/3nZMQmZzzj7wSgxC8WZMn///8zmsz4N5WB4b+kohBzOFyy4f9/JuMZ/2YzMjLw8Kozh652ZPwDNjZ01X/mu+/+LQCZoizElLA6jPEviM3osP8/y+eb/5b+/8/wxS+DKbWBkfEfSAIEmCAUUBUjw38YG0bjNxamCuSgTXAHMUUfgDkIpgDuFcb/kkpAr2ANBJMZf/uBGn7DNGHQoOADAC0QQ/xkkXHhAAAAAElFTkSuQmCC);
  background-size: cover;
}
.jw-input-pagination .jw-input-pagination-start[disabled] {
  background: none;
}
.jw-input-pagination .jw-input-pagination-start[disabled] button {
  opacity: 0.5;
}
.jw-input-pagination .jw-input-pagination-end i {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAYCAYAAADKx8xXAAAAAXNSR0IArs4c6QAAAdxJREFUOBFjYKAE1NTUqP///5+RFDMYKysr7YGatgE1LePg4EhvaGj4R4wBTOzs7HeBGp8CccqPHz/mr1q1ipkYjWDnVVVVSf79+3cvUIMmIyPjSqDNMUCb/+AzgAkk2dbW9pyJickeqOkS0OZwoM2rZs6cyYpPI0qAAP0r/O/fv11ADUZAQ7ZISUmF5OXl/cRmANhGmER7e/tbTk5OZ6Cmk0CbfZ49e7apr6+PEyaPTKPYCJPo7OzkfffuHSikbYB4v4iIiG9paelXmDyIxqoRJNHd3c395s2bzUCmIxAfERIS8iovL/8MkgMBnBpBkiBnvnr1agPQ2W4g5wND2wMY2h8IagQpmDRpEjvQr2tAfgZyzwFD3w0UFiiBA1JILMCbSkBOff78+QagYV5AfAoY4q4tLS3vQYbj9CNy4AD9d1RQUNCTYOCQFR3AUBMAJrkdwMAwB9q0S0xMLKCoqOg7yHnIgAWZA9Qk9P37991AMSMg3gpMcsG4khzcj8B0Kgq0ZQ8Q6wFtWq+oqBienp7+G9lgZDY4OkDZCpi4D0I1gbJVGD5NIAMYgc6TATpvH5CtCrRpkZGRUVJYWNhfZNOxsZl+/vypDNQgDcRzgDYlEqMJbhA5hRVcM6kMADVpy2J3WTW4AAAAAElFTkSuQmCC);
  background-size: cover;
}
.jw-input-pagination .jw-input-pagination-end:hover {
  border-color: #3297FC;
}
.jw-input-pagination .jw-input-pagination-end:hover i {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAYAAACulacQAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAB6ADAAQAAAABAAAADAAAAACmhu5HAAAAq0lEQVQYGWOwXPWfkwEHYPr97l+jyYy//djkmRSFmGr+M/xXMJ7+d9r///8ZkRWBOQ77/7N8vvlv6f//DF/8MphSGxgZ/4EUwVWGrvrPfPfdvwUgQWUhpoTVYYx/4ZIgwYb//5k2zfg3m5GRgYdXnSmaCSSIDIAS/2F8uE6cxuJ0EFAH2713f1cy/Gd8fiaDKZuRkRFuLNP9d/9aGBkYH5zNZM5ClgDbiy/4APuWT6hkGQ/qAAAAAElFTkSuQmCC);
  background-size: cover;
}
.jw-input-pagination .jw-input-pagination-end[disabled] {
  background: none;
}
.jw-input-pagination .jw-input-pagination-end[disabled] button {
  opacity: 0.5;
}
.jw-input-pagination .jw-input-pagination-pageno,
.jw-input-pagination .jw-input-pagination-jump {
  display: inline-block;
  vertical-align: middle;
}
.jw-input-pagination .jw-input-pagination-pageno {
  margin: 0 10px;
  color: #999999;
}
.jw-input-pagination .jw-input-pagination-jump {
  margin-left: 10px;
  color: #3297FC;
  cursor: pointer;
}
.jw-input-pagination .jw-input-pageno {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  margin-left: 16px;
}
.jw-input-pagination .jw-input-pageno .jw-input {
  height: 24px;
}
.jw-input-pagination .jw-input-pageno .jw-input fieldset {
  border: none;
}
.jw-input-pagination .jw-input-pageno input {
  padding: 2px 3px;
  font-size: 12px;
  text-align: center;
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #e7e7e7;
  color: #999999;
}
.jw-input-pagination .jw-input-pageno input:hover, .jw-input-pagination .jw-input-pageno input:focus {
  border-color: #3297FC;
  color: #3297FC;
}
.jw-input-pagination .jw-input-pageno-change {
  display: inline-block;
  vertical-align: middle;
  margin-left: 30px;
}
.jw-input-pagination .jw-input-pageno-change button {
  padding: 2px 24px 2px 8px;
  font-size: 12px;
  color: #999999;
  border: 1px solid #e7e7e7;
}
.jw-input-pagination .jw-input-pageno-change .MuiSvgIcon-root {
  fill: currentColor;
  width: 1em;
  height: 1em;
  display: inline-block;
  font-size: 1.5rem;
  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.jw-input-pagination .jw-input-pageno-change .MuiSelect-icon {
  top: calc(50% - 12px);
  color: #999999;
  right: 0;
  position: absolute;
  pointer-events: none;
}
.jw-input-pagination .jw-input-pageno-change .MuiSelect-iconOpen {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.jw-input-pageno-changemenu .jw-menuitem li {
  min-width: 77px;
  height: 20px;
  font-size: 14px;
  color: #494949;
  text-align: center;
}
.jw-input-pageno-changemenu .jw-menuitem li:hover, .jw-input-pageno-changemenu .jw-menuitem li.active {
  background: #f7f7f7;
}
.jw-input-pageno-changemenu .jw-menuitem li font {
  text-align: center;
  display: block;
  width: 100%;
}