如何让jQuery MiniColors识别并应用指定的CSS类？

云上老周

2026-5-21

没问题，这事儿超简单！要让jQuery MiniColors识别并应用你指定的.color-picker CSS类，跟着下面几步走就搞定了：

1. 先确保引入必要的依赖文件

MiniColors依赖jQuery，所以加载顺序一定要对：

<!-- 先引入jQuery库 -->
<script src="jquery.min.js"></script>
<!-- 再引入MiniColors的样式文件 -->
<link rel="stylesheet" href="jquery.minicolors.css">
<!-- 最后引入MiniColors的JS文件 -->
<script src="jquery.minicolors.min.js"></script>

2. 初始化MiniColors时选择你的目标类

等DOM加载完成后，直接通过.color-picker类选择器来初始化颜色选择器就行：

$(document).ready(function() {
  // 给所有带color-picker类的输入框初始化MiniColors
  $('.color-picker').minicolors();
});

3. （可选）自定义配置满足你的需求

如果需要调整默认颜色、显示模式或者添加调色板之类的，只需要在初始化时传入配置对象：

$(document).ready(function() {
  $('.color-picker').minicolors({
    defaultValue: '#f0f0f0', // 设置默认颜色
    format: 'hex', // 可选颜色格式：hex/rgb/hsl
    showInput: true, // 显示颜色值输入框
    showPalette: true, // 开启预设调色板
    palette: [ // 自定义调色板颜色
      ['#ff0000', '#00ff00', '#0000ff'],
      ['#ffff00', '#ff00ff', '#00ffff']
    ]
  });
});

最后检查你的HTML结构

你给出的HTML代码基本没问题，只是注意下Color输入框的id最好改成合法的（比如id="Color"而不是id="Color..."），不过这不影响类选择器的初始化：

<div class="form-group">
  <label class="control-label col-sm-2" for="Name">Name</label>
  <div class="col-sm-4">
    <input class="form-control" type="text" id="Name" name="Name" value="" />
  </div>
</div>
<div class="form-group">
  <label class="control-label col-sm-2">Color</label>
  <div class="col-sm-4">
    <input type='text' class='form-control color-picker' id="Color" />
  </div>
</div>