How to remove borders from kintone built-in data fields?

1

Is it possible to remove the borders from the kintone data fields on the Detail Edit page?

On my Detail Edit page, I have some text fields, date fields, and a table.

I want to remove the borders of text fields and date fields that are outside of the table. Is it possible to do so?

const nodeList = document.querySelectorAll('input[class="input-text-cybozu"], input[class="input-date-text-cybozu"]');
        console.log(nodeList);
2

Hello Annay Lee,

To better support you, here are a few questions to get more information regarding your question and goals:

  • Are you using a Cybozu or Kintone subdomain? (The CSS class names may vary)
  • What do you mean by removing the borders from the fields? Do you want to modify the CSS such that the field borderlines are set to white or set to 0 px?

Also, a screenshot illustrating how you want to modify the Record Edit page would help understand what you desire from the style customization.

Thank you for your time

3

I am currently a kintone client using a kintone subdomain.

On my detail edit page, I have a text field with a field code of “quote” and a date field with a field code “quote_date”.

I also have a table with a field code “item_table”. There are some text fields inside the table.

Every kintone data field has a border around it. How to change the css border property of the text field and the data field that are outside of the table?

I hope you get the idea. I meant the border .

        Quote | ___________________ |

 

4

Hi annaylee,

With customization, field borders can be removed when the record detail page is displayed.

By utilizing the following APIs;

Onload Event (desktop) - app.record.detail.show
An event triggered after the record details page is displayed on the desktop.

https://kintone.dev/en/docs/kintone/js-api/events/record-details-event/#onload-event-desktop

Get Record Field Element - kintone.app.record.getFieldElement()
Retrieves the field element of a field in the record by specifying the field code.

https://kintone.dev/en/docs/kintone/js-api/get-data/get-record/#get-record-field-element

When the ‘app.record.detail.show’ event fires, the ‘quote’ and ‘quote_date’ field elements can be acquired with the kintone.app.record.getFieldElement function.

Also, changing the background color or eliminating the border in the “quote” or “quote_date” field element style makes it possible to display what you desire.

It would look something like this;

(function() {
    'use strict';

    kintone.events.on('app.record.detail.show', function(event) {

        var fields = ['quote', 'quote_date'];
        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
            var element = kintone.app.record.getFieldElement(field);
            element.style.backgroundColor = '#f5f5f5';
            element.style.borderWidth = '0px';
        }
    });

})();

Hopefully, this helps.