如何修改标题大小
在表单设计过程中,想要设计组件的样式调整页面美观,或者告知用户这个组件内填写信息的重要性,就可以使用更改组件的样式来实现。
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. 视频演示
修改标题颜色视频演示
宜搭为了更好的优化宜搭使用手册内容和质量,占用您3-5分钟时间,辛苦填写一下文档反馈问卷。文档反馈问卷是匿名提交,同时问卷信息仅用于宜搭文档体验反馈收集,感谢您对宜搭的支持!
--------------------获取宜搭最新信息,欢迎关注我们--------------------

本文档对您是否有帮助?