How to modify the style size of a single-line text component
This methodSystem errors such as disordered application styles may occur., andYIDA the official cannot help you with the rollback operation!Please consider carefully before using!
In the next YIDA, we will provide secure style customization capabilities to meet different UI demands. Please look forward to it ~
1. Usage scenarios
In the form design process, you can change the style of the component by changing the style of the component if you want to design the style of the component to adjust the appearance of the page or inform the form submission personnel of the importance of filling in the information in the component.
2. Video Display
3. Procedure
3.1 PC operation steps
3.1.1 Step 1: Create a form
Drag and drop a container or layout container in the form, and then add a single-line text component to the container.
Form editing page
3.1.2 Step 2: modify the title size
Operation path:Click layout container> Find style> Click source code Edit> add the following code.
- The following code is copied directly,Note replace the unique identifier of a single line of text.
- In
: rootAnd.nextYou need to add a space between them, otherwise the style written in is invalid!
/*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;
}
As shown in the following figure:
Component source code editing
3.2 Mobile terminal operation steps
3.2.1 Step 1: Create a form
Operation path:Create form> layout container> single-line text component> layout style design> source code editing
Form editing
3.2.2 Step 2: write code
Enter the following code to modify the style of the mobile background, title, font, and other configuration items.
Copy the following code directly,Replace the unique identifier of a single line of text!
/*移动端背景-天蓝色*/
: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;
}
Dynamic picture demonstration:
Demo of modifying Title color
4. Common use problems
Q: How do I set a multi-line text style?
A: You can copy the following code.
The following code can be copied directly,Replace the unique identifier of multiple lines of text.
/* pc-多行文本标题样式*/
.textareaField_kvw52rxm label{
color: red;
font-size: 17px;
}
/*pc/mobile-多行文本内容样式*/
#textareaField_kvw52rxm{
color: #fff;
font-size: 17px;
background: red;
}
/*pc/mobile-多行文本占位提示样式*/
#textareaField_kvw52rxm::-webkit-input-placeholder {
color: #ffffff;
}
/* mobile-标题样式*/
.textareaField_kvw52rxm span{
color: red;
font-size: 17px;
}
-------------------- Get the latest information YIDA, welcome to follow US--------------------
