概要

SpreadJSではリッチテキストがサポートされます。上付き文字や下付き文字など、さまざまなテキストスタイルを1つのセル内に表示できます。

リッチテキストデータは匿名オブジェクトであり、JSONスキーマに従う必要があります。 指定のシート領域内の指定のセルに値を設定するには、次のコードを使用します。 指定のシート領域内の指定のセルから書式なしデータを取得するには、次のコードを使用します。
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.append($(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($("#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') { $(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 = $('.rich-editor-content')[0]; 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, }); $("#setRichText").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 name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/jquery-1.8.2.min.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">リッチテキストの設定</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">設定</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; }