お世話になります。
フォームブリッジのカスタマイズに関して２点ご教示いただけないでしょうか。
１．placeholderをjavascript上から適用したいのですが、文字列1行の項目には適用されましたが、ドロップダウンの項目には適用されないようでした。
ドロップダウンへのplaceholderの設定方法はございますでしょうか？
２．項目個別のスタイルをjavascript上から適用したいのですが、PCにて表示した際は適用されましたが、スマートフォン表示時には適用されないようでした。
スマートフォン表示へのスタイル設定方法はございますでしょうか？
テストしたコードは以下になります。
ご存じの方がいらっしゃいましたらご教示いただけないでしょうか。
よろしくお願いいたします。
(function () {
"use strict";
fb.events.form.created = [function (state) {
getField(state, 'sei').attributes.placeholder = '姓'; // ← 文字列1行（placeholder表示される）
getField(state, 'nen').attributes.placeholder = '西暦'; // ←ドロップダウン（placeholder表示されない。選択してくださいになってしまう。）
getField(state, 'kojinjohoHogo').style = { // ←ラベルのコントロール。PC表示ではスタイル効く。スマートフォン表示ではスタイル効かない。
'height': '270px !important',
'overflow-y': 'scroll !important',
'border': '1px solid #cbcccd !important',
'border-width': '1px !important',
'margin': '0 auto !important'
};
return state;
}];
/**
* フィールドオブジェクトを取得します。
*
* @param {Object} state fbイベントのstateオブジェクト
* @param {String} fieldCode フィールドコード
* @return {Object} フィールドオブジェクト
*/
function getField(state, fieldCode) {
return state.fields.find(function (f) { return f.code === fieldCode; });
}
/* IE11用Array.prototype.find拡張 */
if (!Array.prototype.find) {
Array.prototype.find = function (predicate) {
if (this === null) {
throw new TypeError('Array.prototype.find called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
let list = Object(this);
let length = list.length >>> 0;
let thisArg = arguments[1];
let value;
for (let i = 0; i < length; i++) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return value;
}
}
return undefined;
};
}
})();