Hey Brian, let's troubleshoot why your Quill list toolbar button is clickable but has no visible styling! Here are the most likely causes and fixes:

1. Incorrect Toolbar Configuration (Most Common) #

Quill's Snow theme doesn't include styles for a generic .ql-list class because the standard list tools are split into ordered and bullet lists. If your toolbar config uses ['list'] instead of the specific list types, Quill generates a button with the .ql-list class—but there's no corresponding CSS for it in quill.snow.css.

Fix: Update your toolbar config to use the proper list identifiers:

var quill = new Quill('#editor', {
  modules: {
    toolbar: [
      ['ordered', 'bullet'] // Use these instead of ['list']
    ]
  },
  theme: 'snow'
});

This will generate buttons with .ql-ordered and .ql-bullet classes, which have built-in icon styles in the Snow theme.

2. Mismatched or Unloaded Quill CSS #

If your Quill.js and Quill.snow.css versions don't match, or the CSS file failed to load, the necessary styles for toolbar buttons won't be available.

Checks:

• Open your browser's DevTools (Network tab) and verify quill.snow.css loaded successfully.
• Ensure the CDN URLs for both JS and CSS use the same version number. For example:

  <!-- Match versions exactly -->
  <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
  <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
  

3. Custom CSS Overriding Quill Styles #

If you have custom styles that reset button backgrounds or override Quill's default toolbar styles, it could hide the list button's icon.

Check:

• In DevTools, inspect the .ql-list button and look at its background-image property. Quill uses inline background images for toolbar icons—if this is missing or set to none, your custom CSS might be overriding it.
• Add a specificity override if needed, e.g.:

  .ql-toolbar .ql-list {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 18 18"><path d="M5 4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm0 4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm0 4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm8-8a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm0 4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm0 4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3z"/></svg>');
  }
  

Bonus: If You Need a Single "List" Toggle Button #

If you specifically want a single button to toggle between ordered/bullet lists (instead of two separate buttons), you'll need to create a custom handler and add your own styles for .ql-list, since this isn't a default Quill tool.

内容的提问来源于stack exchange，提问作者Brian Mains