在表单设计过程中，想要设计组件的样式调整页面美观，或者告知用户这个组件内填写信息的重要性，就可以使用更改组件的样式来实现。

1. 设计PC端样式

PC端展示

布局容器>>单行文本组件>>布局样式设计>> 源码编辑

下述代码可直接复制到源码编辑内，注意替换单行文本的唯一标识。

/*pc端标题-天蓝色*/
:root .textField_ksk6ban3 label{
font-size:20px;
color:skyblue;
 }
/*pc端背景-天蓝色*/
:root .next-form-item-control span{
  background:skyblue;
}
/*pc/移动端，输入字体-白色*/
:root .textField_ksk6ban3 input{
  font-size:18px;
    color:white;
}
 /*pc/移动端，占位提示字体颜色修改-白色*/
#textField_ksk6ban3::-webkit-input-placeholder {
    color: #ffffff; 
}

PC 端配置动图

2. 设计移动端样式

移动端展示

布局容器>>单行文本组件>>布局样式设计>>源码编辑

下述代码可直接复制到源码编辑内，注意替换单行文本的唯一标识。

/*移动端背景-天蓝色*/
:root #textField_ksk6ban3{
  background:skyblue;
}
 /*移动端标题-天蓝色*/
:root .textField_ksk6ban3 span{
   font-size:20px;
    color:skyblue;
 }
/*pc/移动端，输入字体-白色*/
:root .textField_ksk6ban3 input{
  font-size:18px;
    color:white;
}
 /*pc/移动，占位提示字体颜色修改-白色*/
#textField_ksk6ban3::-webkit-input-placeholder {
    color: #ffffff; 
}

移动端配置动图

3. 视频演示