# ラベルの一部の色を変えるやり方

**URL:** <https://community.cybozu.dev/t/topic/10107>\
**Category:** kintone 開発相談\
**Created:** [2025 年 2 月 20 日午前 7:37 UTC](https://community.cybozu.dev/t/topic/10107 "2025-02-20T07:37:48Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![kitano](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kitano](https://community.cybozu.dev/u/kitano)\
**Post date:** [2025 年 2 月 20 日午前 7:37 UTC](https://community.cybozu.dev/t/topic/10107/1 "2025-02-20T07:37:48Z")

</div>

お世話になります。  
入力画面のフィールド名のラベルの一部の文字だけ色を変えたいと思い、以下のコードを入れましたが、最初に入力画面を開いた際はうまくいきましたが、確認画面から入力画面に戻ると色が元に戻ってしまいます。

JavaScript  
function changeLabelColor() {  
var labelElements = document.querySelectorAll(‘label’);  
labelElements.forEach(function(label) {  
var textToHighlight = “必須”;  
if (label.textContent.includes(textToHighlight)) {  
var newHtml = label.innerHTML.split(textToHighlight).join(‘’ + textToHighlight + ‘’);  
label.innerHTML = newHtml;  
}  
});  
}  
// CSSスタイルを追加する関数  
function addHighlightStyle() {  
var style = document.createElement(‘style’);  
style.type = ‘text/css’;  
style.innerHTML = ‘.highlight { color: #0f62fe; }’; // 青色に変更  
document.head.appendChild(style);  
}  
// FormBridgeのイベントハンドラに関数を適用する  
function setupFormBridgeHandlers() {  
// 入力画面が更新されたときにラベルの色を変更するイベントハンドラを設定  
// 以下のコードは、FormBridgeのAPIに依存しているため、実際のAPIの仕様に合わせて調整してください。  
fb.events.input.updated = changeLabelColor; // 例: 入力画面が更新されたとき  
fb.events.confirm.updated = changeLabelColor; // 例: 確認画面が更新されたとき  
}  
// ページの読み込みが完了したら、スタイルを追加し、FormBridgeのイベントハンドラを設定する  
document.addEventListener(‘DOMContentLoaded’, function() {  
addHighlightStyle();  
changeLabelColor(); // 初回の読み込みでラベルの色を変更  
setupFormBridgeHandlers(); // FormBridgeのイベントハンドラを設定  
});

CSS  
.highlight1 {  
color: #0f62fe;  
}

どのように記述すれば改善されますでしょうか。

お忙しいところ恐縮ですが、よろしくお願いいたします。