Styling code-input elements with CSS

Contributors: 2025 Oliver Geer

General comments

code-input elements can be styled like textarea elements in most cases; however, there are some exceptions:

• In major version 2 of code-input.js, code-input elements must keep the CSS display: grid; rather than display: block; when they are shown (but can be display: none; when hidden). Setting display: block; on a code-input element breaks the internal CSS grid styling core to the current version of code-input.js.
• The CSS variable --padding should be used rather than the property padding (e.g. <code-input style="--padding: 10px;">...), or --padding-left, --padding-right, --padding-top and --padding-bottom instead of the CSS properties of the same names. For technical reasons, the value must have a unit (i.e. 0px, not 0). To avoid overcomplicating the code, this padding is always included in any width/heights of code-input elements, so if you want to style textareas and code-input elements with best consistency set box-sizing: border-box on them.
• Background colours set on code-input elements will not work with highlighters that set background colours themselves - use (code-input's selector) pre[class*="language-"] for Prism.js or .hljs for highlight.js to target the highlighted element with higher specificity than the highlighter’s theme. You may also set the background-color of the code-input element for its appearance when its template is unregistered / there is no JavaScript.
• To minimise the chance of this bug: if you import a monospace font family from an online source (for example, Google Fonts or Bunny Fonts) to style code-input elements, and use a syntax highlighting theme that includes bold text, import both the standard (400) and bold (700) weights of the font.
• The caret and placeholder colour by default follow and give good contrast with the highlighted theme. Setting a CSS rule for color and/or caret-color properties on the code-input element will override this behaviour.
• For technical reasons, code-input:focus won’t match anything. Use code-input:has(textarea:focus) instead.
• For now, elements on top of code-input elements should have a CSS z-index at least 3 greater than the code-input element.
• Any max-width or max-height rules you style textareas with should use a CSS selector that excludes textarea elements inside code-input elements (for example, textarea:not(code-input textarea)).

Please do not use className in JavaScript referring to code-input elements, because the code-input library needs to add its own classes to code-input elements for easier progressive enhancement. You can, however, use classList and style as much as you want - it will make your code cleaner anyway.

Highlighting theme requirements

code-input.js works with most highlighter themes from major syntax highlighting libraries. However, if you’re making your own theme or have problems please note:

• Token elements in highlighter themes must not have CSS properties which make text move around and change its position or size compared to its unhighlighted layout. Most code highlighting themes have zero problems here. However, if selecting code in the code-input element looks wrong compared to the highlighted code, you can use CSS like the following, use a different highlighting theme, or get in touch on a GitHub or Codeberg issue:

/* Fixes most broken themes: */
pre code,
pre code * {
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}
pre code * {
    margin: 0px !important;
    border-width: 0px !important;
    padding: 0px !important;
}

/* If the theme uses a proportional font
rather than a monospace font, also include
this CSS: */
pre code,
pre code * {
  font-weight: inherit !important;
  font-style: inherit !important;
}

• The earlier point: to minimise the chance of this bug, if you import a monospace font family from an online source (for example, Google Fonts or Bunny Fonts) to style code-input elements, and use a syntax highlighting theme that includes bold text, import both the standard (400) and bold (700) weights of the font.

Methods of resizing

code-input elements default to having a fixed height and filling the width of their container while the code inside scrolls, and you can set the ordinary CSS properties (for example height and width) to change this size. You can also make the size more flexible using CSS:

• The CSS resize property (see link) can be used on code-input elements to give them the manual resizing handle textareas often come with, when the web browser supports it. For example, <code-input style="resize: both;"… gives:

• You can also make a code-input element resize automatically to fit its contents - use the Autogrow plugin for that.