如何在 Appmaker MultiSelect Widget 中设置选项样式
How to style options in Appmaker MultiSelect Widget
我正在尝试使用 CSS 对 MultiSelect 小部件中的选项进行样式化,例如在每个单独的选项周围制作边框。
有没有办法通过 Appmaker 做到这一点?谢谢
app-MultiSelect-Item 是您正在寻找的自定义选项。
例如:
.app-MultiSelect-Item {
font-size: 12px;
line-height: 12px;
padding-bottom: 8px;
padding-top: 8px;
border: 1px black solid ;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: #FF9800;
}
CSS 与 checked/unchecked 选项不同
以下示例的边上有圆角边框。未选中为红色,选中为绿色(绿色背景)
.app-MultiSelect-Input {
font-size: 11px;
font-family: Verdana;
}
.app-MultiSelect-Item {
border-radius: 10px;
border-right: 2px red solid;
border-left: 2px red solid;
line-height: 8px;
margin-top: 3px;
}
.app-MultiSelect-Item.selected {
border-radius: 10px;
border-right: 2px green solid;
border-left: 2px green solid;
background-color: lightgreen;
line-height: 8px;
margin-top: 3px;
}
来源:[https://developers-dot-devsite-v2-prod.appspot.com/appmaker/scripting/api/widgets#MultiSelect][1]
我正在尝试使用 CSS 对 MultiSelect 小部件中的选项进行样式化,例如在每个单独的选项周围制作边框。
有没有办法通过 Appmaker 做到这一点?谢谢
app-MultiSelect-Item 是您正在寻找的自定义选项。
例如:
.app-MultiSelect-Item {
font-size: 12px;
line-height: 12px;
padding-bottom: 8px;
padding-top: 8px;
border: 1px black solid ;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: #FF9800;
}
CSS 与 checked/unchecked 选项不同
以下示例的边上有圆角边框。未选中为红色,选中为绿色(绿色背景)
.app-MultiSelect-Input {
font-size: 11px;
font-family: Verdana;
}
.app-MultiSelect-Item {
border-radius: 10px;
border-right: 2px red solid;
border-left: 2px red solid;
line-height: 8px;
margin-top: 3px;
}
.app-MultiSelect-Item.selected {
border-radius: 10px;
border-right: 2px green solid;
border-left: 2px green solid;
background-color: lightgreen;
line-height: 8px;
margin-top: 3px;
}
来源:[https://developers-dot-devsite-v2-prod.appspot.com/appmaker/scripting/api/widgets#MultiSelect][1]