.font-size-wrapper {
  position: relative;
  line-height: 20px;
  display: inline-block;
  padding: 0 8px;
  width: 40px;
  box-sizing: content-box;
}
.font-size-wrapper .font-size-up {
  display: inline-block;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 8px;
  height: 8px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABNUlEQVRYR+2Vr0sDYRyHn8NgEAwGg2FBWDAsGBYMgoaFhYWxzf9kyf9if4ZODIaFBYWFBYWFhYUFg2AwLGwwMAzkxveFcdzd+2N3HML71nu/n+fh8969F1DwCgrm4wV8A76Bf93ABXAPrIAeMHO5U1wbKANPQEWgU6AFzG0lXATOgT5wGYFNROLTRsJWoCTwagLkXSS+TCVsBM4EfqUJHwNt4NtEwlTgVODXJqHASCR+dPtNBE4EfqsLizx/FYlF2pxO4FjgNUu42j4UiWXSfJrAEfAI1B3hamwgEuu4nCSBQ4E39oSr8RegA/xG8+IEDgTezAiuYp5FYrObGyfwIBsz5m/jwiO9SxO4AcK3N88Vfk1vChDXQPhjUXd81iIfQFd3BFlDU/N090DuMl7AN+AbKLyBPzSCJyE0UY/CAAAAAElFTkSuQmCC) center center no-repeat;
  background-size: 8px 8px;
}
.font-size-wrapper .font-size-down {
  display: inline-block;
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 8px;
  height: 8px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABP0lEQVRYR+2VL09CURjGf8xAcCMYCASCm4FAIBAIbBgIBoMT+SYmv4UfQ2EEAoGAm8EAm8FgMBjcDAaCbm4EN/ZuL9vdFe455/7ZJZzb7s55nud3nnvOPQVyfgo55+MBfAO+gb1s4BaoZ/R/WADXQe9wAx1gllH4xvYUeNi8bPsEd8BVRhD3QD+qARk7AGTiRcoQI13YnwlAxosKcZ4SxFjDV2G/qFNwqBBnCSEmQA/43eZjOoYlYAB0Y0JMNfx7l94EILojhZDd6/LIaZKVL6NENgCiLytE25LgUcO/TPNtAcSnohAtg+mThn+awmXcBUDmVxWiucN8DlwCHzbhcQBEc6wQjVDIs4a/24bHBRDdCTAM3BkvGv7mEp4EQLQ14Ab4AeQCe3UNTwoQJ++fxnUTphIaNPEAvgHfQO4NrAGSgychyCxBhAAAAABJRU5ErkJggg==) center center no-repeat;
  background-size: 8px 8px;
}
.font-size-list {
  list-style: none;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  border: 1px solid #e8e8e8;
  min-width: 104px;
  cursor: pointer;
  padding-inline-start: 0px;
}
.font-size-list li {
  list-style: none;
  line-height: 30px;
  font-size: 14px;
  text-align: center;
}
.font-size-list li:hover {
  background: #eee;
}
.font-size-list li.active {
  background: #0082ff;
  color: #fff;
}