kintone UI Componentのドロップダウンの文字色を変える

今回は、kintone UI Componentのドロップダウンの文字色を変更します。
※DOM操作をするので、kintone UI Componentの仕様が変わると使えなくなる場合があります。

アプリの準備

スペースフィールドを設置します。
要素IDはspDropdownとしておきましょう。

JavaScript

kintone UI Componentは↓こちらを参考に導入して下さい。
※本記事で使用したバージョンは1.0.3

ドロップダウンの設置

// ドロップダウンを設置するスペースフィールドの要素を取得
const spDropdown = kintone.app.record.getSpaceElement("spDropdown");

// ドロップダウンをつくる
const drColors = new Kuc.Dropdown({
  label: "ドロップダウン色変え",
  items: [
    { label: "あか", value: "red" },
    { label: "あお", value: "blue" },
    { label: "みどり", value: "green" },
    { label: "だいだい", value: "orange" },
    { label: "くろ", value: "black" },
  ],
});

// スペースフィールドにドロップダウンを置く
spDropdown.appendChild(drColors);

ドロップダウン選択

単純に、3つ目の<span>タグだったので2としています。
※kintone UI Componentの仕様が変わると動かなくなる可能性があります。

// ドロップダウンを選択したときのイベント
drColors.addEventListener("change", (e) => {
  const b = drColors.querySelectorAll("span");
  b[2].style.color = e.detail.value;
  b[2].style.fontWeight = "bold"; // お好みで太字に
});

ドロップダウンの色

setIntervalで色設定しています。色はvalueに持たせている値をそのまま使っています。

// ドロップダウンの色設定
const set_interval_id = setInterval(() => {
  const lis = drColors.querySelectorAll("li");
  lis.forEach((e) => {
    e.style.color = e.getAttribute("value");
    e.style.fontWeight = "bold"; // お好みで太字に
  });

  clearInterval(set_interval_id);
}, 100);

まとめ

ドロップダウンを目立たせたい・・・！そんな時に用法用量を守ってお使いいただければと思います。