# 入力フィールドに色をつけたい

**URL:** <https://community.cybozu.dev/t/topic/3751>\
**Category:** kintone 開発相談\
**Created:** [2019 年 1 月 31 日午前 7:42 UTC](https://community.cybozu.dev/t/topic/3751 "2019-01-31T07:42:52Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1607](https://avatars.discourse-cdn.com/v4/letter/l/eada6e/32.png) [@Legacy\_Account1607](https://community.cybozu.dev/u/Legacy_Account1607)\
**Post date:** [2019 年 1 月 31 日午前 7:42 UTC](https://community.cybozu.dev/t/topic/3751/1 "2019-01-31T07:42:52Z")

</div>

お世話になります。

&nbsp;

プロセスにより入力する項目に色を付けたいと考えております。

つけるのは数字フィールド、文字フィールド（テーブル内外問わず）です。

やり方をおしえていただけないでしょうか。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account870](https://avatars.discourse-cdn.com/v4/letter/l/cc9497/32.png) [@Legacy\_Account870](https://community.cybozu.dev/u/Legacy_Account870)\
**Post date:** [2019 年 2 月 1 日午前 2:01 UTC](https://community.cybozu.dev/t/topic/3751/2 "2019-02-01T02:01:38Z")

</div>

こんにちは。はじめまして、ひよこです。

レコード編集画面では、入力フィールドの属性を取得できないので、色を付けることはできません。[https://developer.cybozu.io/hc/ja/articles/201942014#step3](https://community.cybozu.dev/hc/ja/articles/201942014#step3)

代替手段として、以下などはいかがでしょうか。

・入力させたくない項目を編集不可にする  
[https://developer.cybozu.io/hc/ja/articles/202166270#step5  
 ](https://community.cybozu.dev/hc/ja/articles/202166270#step5)[https://developer.cybozu.io/hc/ja/articles/200306919](https://community.cybozu.dev/hc/ja/articles/200306919)

・入力させたい項目が未入力だったらエラーにする  
[https://developer.cybozu.io/hc/ja/community/posts/115018001423](https://community.cybozu.dev/hc/ja/community/posts/360018052523)

&nbsp;

プロセスのステータスは、event.record[‘ステータス’][‘value’] で取得できます。

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1804](https://avatars.discourse-cdn.com/v4/letter/l/ecd19e/32.png) [@Legacy\_Account1804](https://community.cybozu.dev/u/Legacy_Account1804)\
**Post date:** [2019 年 2 月 1 日午前 2:38 UTC](https://community.cybozu.dev/t/topic/3751/3 "2019-02-01T02:38:10Z")

</div>

色を付けたいのは、入力エリアの背景で合っていますか？

kintoneの標準機能では編集画面で任意の入力エリア(input)の要素を取得する方法がありません。  
なので、DOM操作になります。(ほぼ無理矢理なので非推奨。どうしても色を付けたい場合。)

htmlの構造を理解していないと任意のエリアを指定するのが難しいかもしれません。

以下はアプリに配置されている一番左上の入力エリア(項目名を表示している状態)の背景色を変更するサンプルです。

サンプル画像

childNodesの[]内の数字が入力エリアの位置を表しています。  
idがrecord-gaiaの要素から辿った位置なので、開発者ツールなどから位置を把握することができます。

```
(function() {
  "use strict";

  var timing = [
    'app.record.create.show',
    'app.record.edit.show',
    'mobile.app.record.create.show',
    'mobile.app.record.edit.show'
  ];

  kintone.events.on(timing, function(e) {

    var parent = document.getElementById("record-gaia");
    var nodes = parent.childNodes[0].childNodes[0].childNodes[0].childNodes[1].childNodes[0].childNodes[0];

    nodes.style.backgroundColor = 'yellow';

  });

})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1607](https://avatars.discourse-cdn.com/v4/letter/l/eada6e/32.png) [@Legacy\_Account1607](https://community.cybozu.dev/u/Legacy_Account1607)\
**Post date:** [2019 年 2 月 1 日午前 6:26 UTC](https://community.cybozu.dev/t/topic/3751/4 "2019-02-01T06:26:03Z")

</div>

ありがとうございます。

入力ボックスに色をつけたい理由としては、入力する際に迷わせない狙いがあります。

ひよこさんの方法もよいのですが、項目が多くなった場合などにメンテナンスが不便です。

アラートだと後の対応となるためできれば色でわかりやすくできないものかと。

FMさんの方法はもっと大変なのでやめておきます。

せっかく回答いただいたのにすみません。

&nbsp;

&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1517](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@Legacy\_Account1517](https://community.cybozu.dev/u/Legacy_Account1517)\
**Post date:** [2019 年 2 月 1 日午前 8:40 UTC](https://community.cybozu.dev/t/topic/3751/5 "2019-02-01T08:40:37Z")

</div>

takokichi さん

宣伝になってしまいますが、[項目検証プラグイン](https://qiita.com/rex0220/items/be20fd879f5e1bc9e035)をご紹介します。

有償プラグインで、下記のような機能があります。

必須チェック・バリデーションチェック・入力抑止・表示制御を、条件式を指定するだけで処理出来ます。  
Excel の計算式のような指定方法で、複雑な条件を指定できます。

- 必須チェック・バリデーションチェック・入力抑止・表示制御
- エラー及び必須項目入力枠に色表示
- エラー及び必須項目入力状況表示
- PC・スマホ対応

ご参考になれば。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1607](https://avatars.discourse-cdn.com/v4/letter/l/eada6e/32.png) [@Legacy\_Account1607](https://community.cybozu.dev/u/Legacy_Account1607)\
**Post date:** [2019 年 2 月 1 日午前 8:49 UTC](https://community.cybozu.dev/t/topic/3751/6 "2019-02-01T08:49:19Z")

</div>

rexさん

ありがとうございます。

過去質問を参考にヘッダで解決いたしました。

[フィールド名に色をつけること](https://community.cybozu.dev/hc/ja/community/posts/115020441183-%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E5%90%8D%E3%81%AB%E8%89%B2%E3%81%A4%E3%81%91%E3%82%8B%E3%81%93%E3%81%A8%E3%81%AF%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%81%8B-)

ありがとうございました。

&nbsp;

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 9 月 6 日午前 12:54 UTC](https://community.cybozu.dev/t/topic/3751/7 "2024-09-06T00:54:49Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。