Overview

SpreadJS supports rich text. You can show superscript, subscript and different text styles in one cell. The editor on the right can be used to create text with different styles, which can then be set in a cell using the ‘Set Rich Text’ button.

Rich text data is an anonymous object,you should follow the JSON Schema. You can set the value for the specified cell in the specified sheet area using the following code: You can get the unformatted data from the specified cell in the specified sheet area using the following code:
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); initSpread(spread); setOption(spread); }; function initSpread(spread) { var lawOfUniversalGravitation = { richText: [ { style: { font: "normal 24px Calibri" }, text: "F = (G * M" }, { style: { font: "normal 24px Calibri", vertAlign: 2 }, text: "1" }, { style: { font: "normal 24px Calibri" }, text: " * M" }, { style: { font: "normal 24px Calibri", vertAlign: 2 }, text: "2" }, { style: { font: "normal 24px Calibri" }, text: ") / R" }, { style: { font: "normal 24px Calibri", vertAlign: 1 }, text: "2" } ] }; var reaction = { richText: [ { style: { font: "normal 24px Calibri" }, text: "3 Ba(OH)" }, { style: { font: "normal 24px Calibri", vertAlign: 2 }, text: "2" }, { style: { font: "normal 24px Calibri" }, text: " + 2 H" }, { style: { font: "normal 24px Calibri", vertAlign: 2 }, text: "3" }, { style: { font: "normal 24px Calibri" }, text: "PO" }, { style: { font: "normal 24px Calibri", vertAlign: 2 }, text: "4" }, { style: { font: "normal 24px Calibri" }, text: " → 6 H" }, { style: { font: "normal 24px Calibri", vertAlign: 2 }, text: "2" }, { style: { font: "normal 24px Calibri" }, text: "O + Ba" }, { style: { font: "normal 24px Calibri", vertAlign: 2 }, text: "3" }, { style: { font: "normal 24px Calibri" }, text: "(PO" }, { style: { font: "normal 24px Calibri", vertAlign: 2 }, text: "4" }, { style: { font: "normal 24px Calibri" }, text: ")" }, { style: { font: "normal 24px Calibri", vertAlign: 2 }, text: "2" }, { style: { font: "normal 24px Calibri" }, text: "↓" } ] }; var google = { richText: [ { style: { font: "bold 36px Calibri", foreColor: "rgb(78,133,242)" }, text: "G" }, { style: { font: "bold 36px Calibri", foreColor: "rgb(228,65,52)" }, text: "o" }, { style: { font: "bold 36px Calibri", foreColor: "rgb(247,188,32)" }, text: "o" }, { style: { font: "bold 36px Calibri", foreColor: "rgb(78,133,242)" }, text: "g" }, { style: { font: "bold 36px Calibri", foreColor: "rgb(65,168,87)" }, text: "l" }, { style: { font: "bold 36px Calibri", foreColor: "rgb(228,65,52)" }, text: "e" } ] }; var sheet = spread.sheets[0]; sheet.suspendPaint(); sheet.setColumnWidth(0, 720); sheet.setValue(0, 0, 'Law of universal gravitation:', 3); sheet.setValue(1, 0, lawOfUniversalGravitation, 3); sheet.setRowHeight(1, 40); sheet.getCell(1, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.setValue(3, 0, 'The reaction of barium hydroxide with phosphoric acid:', 3); sheet.setValue(4, 0, reaction, 3); sheet.setRowHeight(4, 40); sheet.getCell(4, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.setValue(6, 0, google, 3); sheet.setRowHeight(6, 50); sheet.name('Basic Usage'); sheet.resumePaint(); spread.options.tabStripRatio = 0.8; } function setOption(spread) { var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var addEventListener = function (parent, type, listener) { return parent.addEventListener(type, listener); }; var appendChild = function (parent, child) { return parent.appendChild(child); }; var createElement = function (tag) { return document.createElement(tag); }; var queryCommandState = function (command) { return document.queryCommandState(command); }; var queryCommandValue = function (command) { return document.queryCommandValue(command); }; var defaultClasses = { actionbar: 'rich-editor-actionbar', button: 'rich-editor-button', content: 'rich-editor-content', selected: 'rich-editor-button-selected' }; var defaultParagraphSeparatorString = 'defaultParagraphSeparator'; var formatBlock = 'formatBlock'; var exec = function (command) { var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; return document.execCommand(command, false, value); }; // font element limitation, only support font size from 1~7 var convertFontSize = function (value) { if (value <= 10) { return 1; } else if (value <= 13) { return 2; } else if (value <= 16) { return 3; } else if (value <= 18) { return 4; } else if (value <= 24) { return 5; } else if (value <= 32) { return 6; } else { return 7; } }; var fontSizeDict = [0, 10, 13, 16, 18, 24, 32, 48]; var _stopBubble = function (e) { if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; } }; var _colorRGB2Hex = function (color) { var rgb = color.split(','); var r = parseInt(rgb[0].split('(')[1]); var g = parseInt(rgb[1]); var b = parseInt(rgb[2].split(')')[0]); return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); }; var createRichTextElement = function (tag, value) { var elem; switch (tag) { case 'subscript': elem = createElement('sub'); break; case 'superscript': elem = createElement('sup'); break; case 'underline': elem = createElement('u'); break; case 'strikeThrough': elem = createElement('strike'); break; case 'foreColor': elem = createElement('font'); elem.color = _colorRGB2Hex(value); break; case 'fontName': elem = createElement('font'); elem.face = value; break; case 'fontSize': elem = createElement('font'); elem.size = convertFontSize(value); break; case 'bold': elem = createElement('b'); break; case 'italic': elem = createElement('i'); break; default: elem = createElement('span'); break; } return elem; }; var addFonts = function (container) { var defaultFonts = { ff1: {name: "Arial", text: "Arial"}, ff2: {name: "Arial Black", text: "Arial Black"}, ff3: {name: "Calibri", text: "Calibri"}, ff4: {name: "Cambria", text: "Cambria"}, ff5: {name: "Candara", text: "Candara"}, ff6: {name: "Century", text: "Century"}, ff7: {name: "Courier New", text: "Courier New"}, ff8: {name: "Comic Sans MS", text: "Comic Sans MS"}, ff9: {name: "Garamond", text: "Garamond"}, ff10: {name: "Georgia", text: "Georgia"}, ff11: {name: "Malgun Gothic", text: "Malgun Gothic"}, ff12: {name: "Mangal", text: "Mangal"}, ff13: {name: "Meiryo", text: "Meiryo"}, ff14: {name: "MS Gothic", text: "MS Gothic"}, ff15: {name: "MS Mincho", text: "MS Mincho"}, ff16: {name: "MS PGothic", text: "MS PGothic"}, ff17: {name: "MS PMincho", text: "MS PMincho"}, ff18: {name: "Tahoma", text: "Tahoma"}, ff19: {name: "Times", text: "Times"}, ff20: {name: "Times New Roman", text: "Times New Roman"}, ff21: {name: "Trebuchet MS", text: "Trebuchet MS"}, ff22: {name: "Verdana", text: "Verdana"}, ff23: {name: "Wingdings", text: "Wingdings"} }; var $ul = container; var fontItems = []; var prefix = 'ff', i = 1, id = prefix + i; while (defaultFonts[id]) { fontItems.push(('<li class="fontfamily-item">' + defaultFonts[id].name + '</li>')); // .replace(/\{id\}/g, id)); i++; id = prefix + i; } $ul.innerHTML += fontItems.join(''); }; var defaultActions = { fontFamily: { icon: '<span id="fontFamilyValue">Calibri</span>' + '<span class="drop-down-arrow"></span>', title: 'Bold', type: 'drop-down', specialStyle: { width: '150px' }, dropDownListId: 'fontFamilyList', queryValue: function () { var value = queryCommandValue('fontName').replace(/"/g, ''); if (value.length > 15) { // if fontFamily string is too long, value = value.substring(0, 15) + '...'; } document.getElementById('fontFamilyValue').innerText = value; }, result: function (e) { e.currentTarget.style.display = 'none'; _stopBubble(e); var result = e.target.nodeName.toUpperCase() === 'LI' ? e.target.innerText : null; if (result) { document.getElementById('fontFamilyValue').innerText = result; exec('fontName', result); return true; } else { return false; } } }, fontSize: { icon: '<span id="fontSizeValue">13</span>' + '<span class="drop-down-arrow"></span>', title: 'Bold', type: 'drop-down', specialStyle: { width: '40px' }, dropDownListId: 'fontSizeList', queryValue: function () { var fontSizeMap = [0, 10, 13, 16, 18, 24, 32, 48]; var value = queryCommandValue('fontSize'); document.getElementById('fontSizeValue').innerText = fontSizeMap[value] ? fontSizeMap[value] : document.getElementById('fontSizeValue').innerText; }, result: function (e) { e.currentTarget.style.display = 'none'; _stopBubble(e); var result = e.target.nodeName.toUpperCase() === 'LI' ? parseInt(e.target.value) : null; if (result !== null) { document.getElementById('fontSizeValue').innerText = fontSizeDict[result]; exec('fontSize', result); return true; } else { return false; } } }, bold: { icon: '<b>B</b>', title: 'Bold', state: function () { return queryCommandState('bold'); }, result: function () { return exec('bold'); } }, italic: { icon: '<i>I</i>', title: 'Italic', state: function () { return queryCommandState('italic'); }, result: function () { return exec('italic'); } }, underline: { icon: '<u>U</u>', title: 'Underline', state: function () { return queryCommandState('underline'); }, result: function () { return exec('underline'); } }, strikethrough: { icon: '<strike>S</strike>', title: 'Strike-through', state: function () { return queryCommandState('strikeThrough'); }, result: function () { return exec('strikeThrough'); } }, colorPicker: { icon: '<span id="foreColorValue" class="color_picker_result">&nbsp;A&nbsp;</span>' + '<span class="drop-down-arrow"></span>', title: 'colorPicker', type: 'drop-down', specialStyle: { width: '40px' }, dropDownListId: 'colorPicker', queryValue: function () { var value = queryCommandValue('foreColor'); document.getElementById('foreColorValue').style.borderBottomColor = value; }, result: function result(e) { e.currentTarget.style.display = 'none'; _stopBubble(e); return e.target.nodeName.toUpperCase() === 'LI' ? exec('foreColor', _colorRGB2Hex(e.target.style.backgroundColor)) : false; } }, superScript: { icon: 'X<sup>2</sup>', title: 'SuperScript', state: function () { return queryCommandState('superscript'); }, result: function () { return exec('superscript'); } }, subScript: { icon: 'X<sub>2</sub>', title: 'SubScript', state: function () { return queryCommandState('subscript'); }, result: function () { return exec('subscript'); } } }; function _getRichText() { var iterator = document.createNodeIterator(document.getElementsByClassName('rich-editor-content')[0], NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null, false); var root = iterator.nextNode();// root var richText = []; var style = {}; var text = ''; var node = iterator.nextNode(); var underlineNode = null, lineThroughNode = null, pNode = null; while (node !== null) { if (node.nodeType === 3/*TextNode*/) { text = node.nodeValue; style = document.defaultView.getComputedStyle(node.parentElement, null); if (underlineNode && underlineNode.contains(node) === false) { underlineNode = null; } if (lineThroughNode && lineThroughNode.contains(node) === false) { lineThroughNode = null; } if (pNode && _getLastTextNode(pNode) === node && _getLastTextNode(root) !== node) { text = text + '\r\n'; pNode = null; } var richTextStyle = _getRichStyle(style, underlineNode, lineThroughNode); _handleSuperAndSubScript(root, node, richTextStyle); richText.push({ style: richTextStyle, text: text }); } else if (node.nodeName.toLowerCase() === 'p') { pNode = node; } else if (node.nodeName.toLowerCase() === 'u') { underlineNode = node; } else if (node.nodeName.toLowerCase() === 'strike') { lineThroughNode = node; } node = iterator.nextNode(); } return richText; }; function _handleSuperAndSubScript(root, node, style) { if (root === node) { return; } while (node.parentNode !== root) { if (node.nodeName.toLowerCase() === 'sub') { style.vertAlign = 2; break; } if (node.nodeName.toLowerCase() === 'sup') { style.vertAlign = 1; break; } node = node.parentNode; } }; function _getRichStyle(style, isUnderlineNode, isLineThroughNode) {// getComputedStyle can't get inherit textDecoration return { font: (style.fontWeight === '700' ? 'bold ' : '') + (style.fontStyle === 'italic' ? 'italic ' : '') + style.fontSize + ' ' + style.fontFamily, foreColor: style.color, textDecoration: (isUnderlineNode ? 1 : 0) | (isLineThroughNode ? 2 : 0) }; }; function _getLastTextNode (root) { if (root && root.nodeType === 1) { var child = root.lastChild; return _getLastTextNode(child); } else { return root; } }; var _initContent = function(settings) { var actions = settings.actions ? settings.actions.map(function (action) { if (typeof action === 'string') { return defaultActions[action]; } else if (defaultActions[action.name]) { //NOSONAR return _extends({}, defaultActions[action.name], action); } return action; }) : Object.keys(defaultActions).map(function (action) { return defaultActions[action]; }); var classes = _extends({}, defaultClasses, settings.classes); var defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div'; var actionbar = createElement('div'); actionbar.className = classes.actionbar; appendChild(settings.element, actionbar); var content = settings.element.content = createElement('div'); content.contentEditable = true; content.className = classes.content; content.oninput = function (_ref) { var firstChild = _ref.target.firstChild; if (firstChild && firstChild.nodeType === 3) { exec(formatBlock, '<' + defaultParagraphSeparator + '>'); } else if (content.innerHTML === '<br>') {//NOSONAR content.innerHTML = ''; } }; content.onkeydown = function (event) { if (event.key === 'Tab') { event.preventDefault(); } else if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') { setTimeout(function () { return exec(formatBlock, '<' + defaultParagraphSeparator + '>'); }, 0); } }; appendChild(settings.element, content); var contentWrapper = createElement(defaultParagraphSeparator); appendChild(content, contentWrapper); if (!this._addedFonts) { addFonts(document.querySelector("#fontFamilyList")); this._addedFonts = true; } actions.forEach(function (action) { var button = createElement('button'); button.className = classes.button; button.innerHTML = action.icon; // button.title = action.title; if (action.specialStyle) { for (var styleProp in action.specialStyle) { if (action.specialStyle.hasOwnProperty(styleProp)) { button.style[styleProp] = action.specialStyle[styleProp]; } } } button.setAttribute('type', 'button'); button.onclick = function () { // should notify each action button to close its drop-down list. var lists = document.getElementsByClassName('list'); var dropDownList = document.getElementById(action.dropDownListId); for (var k = 0; k < lists.length; k++) { if (lists[k] !== dropDownList) { lists[k].style.display = 'none'; } } if (action.type === 'drop-down') { if (button.contains(dropDownList)) { dropDownList.style.display === 'none' ? (dropDownList.style.display = 'block') : (dropDownList.style.display = 'none'); //NOSONAR } else { var dropDownListClone = dropDownList.cloneNode(true); if (action.queryValue) { addEventListener(dropDownListClone, 'click', action.queryValue); } button.appendChild(dropDownListClone); var hostOffsetHeight = button.offsetHeight; dropDownListClone.style.top = hostOffsetHeight + 'px'; dropDownListClone.style.display = 'block'; dropDownListClone.onclick = function (e) { return action.result(e) && content.focus(); }; } } else if (action.type === 'designer-gcui-widget') { document.querySelector(action.widgetId).toggle(); } else { return action.result() && content.focus(); } }; var handler; if (action.state) { handler = function () { return button.classList[action.state() ? 'add' : 'remove'](classes.selected); }; addEventListener(content, 'keyup', handler); addEventListener(content, 'mouseup', handler); addEventListener(button, 'click', handler); } if (action.queryValue) { handler = action.queryValue; addEventListener(content, 'keyup', handler); addEventListener(content, 'mouseup', handler); addEventListener(button, 'click', handler); } appendChild(actionbar, button); }); if (settings.styleWithCSS) { exec('styleWithCSS'); } exec(defaultParagraphSeparatorString, defaultParagraphSeparator); return settings.element; } var richEditor = {exec: exec, init: _initContent}; spread.bind(GC.Spread.Sheets.Events.EnterCell, onSpreadEnterCell); function onSpreadEnterCell(){ var sheet = spread.getActiveSheet(); var contentWrapper = document.querySelector('.rich-editor-content'); contentWrapper.innerHTML=""; var contentText = sheet.getValue(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), 3/* sheetArea */, 1/* richText */); if (contentText && contentText.richText) { for (var i = 0; i < contentText.richText.length; i++) { var elemAttr = []; if (contentText.richText[i].style && contentText.richText[i].text) { for (var styleProperty in contentText.richText[i].style) { if (contentText.richText[i].style.hasOwnProperty(styleProperty)) { switch (styleProperty) { case 'vertAlign': if (contentText.richText[i].style[styleProperty] === 2) { elemAttr.push('subscript'); } else if (contentText.richText[i].style[styleProperty] === 1) { elemAttr.push('superscript'); } break; case 'textDecoration': if ((contentText.richText[i].style[styleProperty] & 1) === 1) { elemAttr.push('underline'); } if ((contentText.richText[i].style[styleProperty] & 2) === 2) { elemAttr.push('strikeThrough'); } break; case 'foreColor': elemAttr.push({ name: 'foreColor', value: contentText.richText[i].style[styleProperty] }); break; case 'font': var spanElem = createElement('div'); spanElem.style.font = contentText.richText[i].style[styleProperty]; if (spanElem.style.fontFamily) { elemAttr.push({ name: 'fontName', value: spanElem.style.fontFamily }); } if (spanElem.style.fontSize) { elemAttr.push({ name: 'fontSize', value: parseInt(spanElem.style.fontSize) }); } if (spanElem.style.fontWeight === 'bold') { elemAttr.push('bold'); } if (spanElem.style.fontStyle === 'italic') { elemAttr.push('italic'); } break; } } } } var parentElem = contentWrapper; for (var j = 0; j < elemAttr.length; j++) { var richTextElem; if (typeof elemAttr[j] === 'string') { richTextElem = createRichTextElement(elemAttr[j]); } else if (typeof elemAttr[j] === 'object' && elemAttr[j]) { richTextElem = createRichTextElement(elemAttr[j].name, elemAttr[j].value); } appendChild(parentElem, richTextElem); parentElem = richTextElem; if (j === elemAttr.length - 1 && richTextElem) { richTextElem.innerHTML = contentText.richText[i].text; } } } } else { contentWrapper.innerHTML = contentText; } } richEditor.init({ element: document.getElementById('richEditor'), defaultParagraphSeparator: 'p', styleWithCSS: false, }); document.getElementById("setRichText").addEventListener("click", function () { var spread =GC.Spread.Sheets.findControl("ss"); var sheet = spread.getActiveSheet(); var richText = _getRichText(); if (richText.length > 0) { sheet.setValue(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), { richText: richText }); } }); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="sp-demo-childBlock"> <div class="sp-demo-Header"> <strong class="sp-demo-HeaderTitle">Settings</strong> </div> <div id="settingsDiv"> <div id="richEditor" class="rich-editor"></div> <ul id="fontSizeList" class="list"> <li class="fontsize-item" value='1'>10</li> <li class="fontsize-item" value='2'>13</li> <li class="fontsize-item" value='3'>16</li> <li class="fontsize-item" value='4'>18</li> <li class="fontsize-item" value='5'>24</li> <li class="fontsize-item" value='6'>32</li> <li class="fontsize-item" value='7'>48</li> </ul> <ul id="fontFamilyList" class="list fontfamily-list"> <li class="fontfamily-item">Segoe UI</li> <li class="fontfamily-item">Arial</li> <li class="fontfamily-item">Calibri</li> <li class="fontfamily-item">Courier New</li> <li class="fontfamily-item">Comic Sans MS</li> <li class="fontfamily-item">Microsoft YaHei</li> <li class="fontfamily-item">Times New Roman</li> </ul> <ul id="colorPicker" class="list"> <li class="colorpicker-item" style="background-color:#FFFFFF;"></li> <li class="colorpicker-item" style="background-color: #C00000;"></li> <li class="colorpicker-item" style="background-color: #FF0000;"></li> <li class="colorpicker-item" style="background-color: #FFC003;"></li> <li class="colorpicker-item" style="background-color: #FFFF00;"></li> <li class="colorpicker-item" style="background-color: #94D051;"></li> <li class="colorpicker-item" style="background-color: #00B050;"></li> <li class="colorpicker-item" style="background-color: #00AFF0;"></li> <li class="colorpicker-item" style="background-color: #006EC3;"></li> <li class="colorpicker-item" style="background-color: #001E6E;"></li> <li class="colorpicker-item" style="background-color: #6E32A0;"></li> <li class="colorpicker-item" style="background-color: #000000;"></li> </ul> <button id="setRichText" value="Set Rich Text">Set Rich Text</button> </div> </div> </div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } * { margin: 0; padding: 0; } .list { list-style: none; display: none; position: absolute; box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, .15); background-color: white; } .fontfamily-list{ overflow: scroll; height: 200px; } .rich-editor { border: 1px solid rgba(10, 10, 10, 0.1); box-sizing: border-box; background-color: white; } .rich-editor-content { box-sizing: border-box; height: 270px; outline: 0; overflow-y: auto; padding: 10px; } #setRichText { display: inline-block; background-color: white; border: none; width: 120px; height: 30px; line-height: 30px; margin-top: 5px; box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, .15); } .rich-editor-actionbar { background-color: #FFF; border-bottom: 1px solid rgba(10, 10, 10, 0.1); } .rich-editor-button { background-color: transparent; border: none; cursor: pointer; height: 30px; line-height: 30px; outline: 0; width: 30px; display: inline-block; margin: 0 3px; padding:0 2px; } .drop-down-arrow { display: inline-block; height: 30px; line-height: 30px; } .drop-down-arrow:before { display: block; content: ''; width: 0; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; margin-top: 23px; margin-left: 2px; } .rich-editor-button-selected { background-color: #F0F0F0; } .color_picker_result { border-bottom: 5px solid black; } #fontSizeList { width: 40px; } #fontFamilyList { width: 140px; } #colorPicker { width: 70px; } .fontsize-item { width: 40px; height: 30px; line-height: 30px; text-align: center; cursor: pointer; } .fontfamily-item { width: 128px; height: 30px; line-height: 30px; text-align: left; padding-left: 13px; cursor: pointer; } .colorpicker-item { width: 16px; height: 16px; margin: 1px; padding: 1px; border: 1px solid transparent; background-clip: content-box; float: left; display: inline-block; } .fontsize-item:hover { background-color: #DDDDDDAA; } .fontfamily-item:hover { background-color: #DDDDDDAA; } .colorpicker-item:hover { box-shadow: 1px 1px 1px 1px rgba(51, 51, 51, .15); } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }