表单

输入框:(行级)



输入框:(块级)



单选框(radio):


[color=red]单选框(radio)使用需要借助JS才能完成渲染,引入form自动完成渲染。 下面是html元素: [/color]
单选框默认选中颜色号:[color=#2196F3]#2196F3[/color] 如果需要改变颜色请在你的CSS文件中定义: [color=#ed21f3].aeui-form-radio.checked .radio-ico:before [/color]{   [color=#666]/*选中时的中心圆点背景*/[/color]   background-color: #2196F3!important; } [color=#ed21f3].aeui-form-radio.checked .radio-ico[/color]{   [color=#666]/*选中时的边框*/[/color]   border: 1px solid #2196F3!important; } [color=#ed21f3].aeui-form-radio:active .radio-ico[/color]{   [color=#666]/*点击时的边框*/[/color]   border: 1px solid #2196F3; }

单选框演示(块级)

单选框演示(行级)


多选择框(checkbox):

[color=red]注意:多选择框(checkbox)需要借助JS才能完成渲染,无需要主动使用方法,引入form自动完成渲染 下面是html元素: [/color]
[hr] 默认颜色号:[color=#2196F3]#2196F3[/color] ,想要改变多选框颜色需要在你的css文件中定义: [color=#ed21f3].aeui-form-checkbox.checked .checkbox-ico[/color]{   [color=#666]/*选中后背景颜色*/[/color]   background-color: #2196F3; } [color=#ed21f3].aeui-form-checkbox.checked .checkbox-ico:before[/color] {   [color=#666]/*选中图标颜色*/[/color]   color: #FFFFFF; }

多选择框演示(行级)

多选择框演示(块级)


滑块条:

[color=red]注意:滑块条需要借助JS才能完成渲染,无需要主动使用方法,引入form自动完成渲染 下面是html元素: [/color]
滑块条,默认情况下是小型滑块条,如果不适应您当前的情况可以选择在 .aeui-form 节点处添加如下class [color=red].range-size-l[/color] 大滑块条 [color=red].range-size-m[/color] 中等滑块条 [hr] 改变滑块条颜色; 默认颜色号:[color=#2196F3]#2196F3[/color] ,想要改变滑块颜色需要在你的css文件中定义: [color=#ed21f3].range-speed,.range-slider-but[/color]{   [color=#666]/*滑块条背景颜色与按钮颜色*/[/color]   background-color: #2196F3 !important; } [color=#ed21f3].range-slider-bg[/color] {   [color=#666]/*滑块条背景边框*/[/color]   border: 1px solid #eee !important; } 下面是html:

滑块条演示(PC端下不可滑动,请使用手机设备访问):


下拉列表(select):


下拉列表(select) 默认颜色号:[color=#2196F3]#2196F3[/color] ,想要改变下拉列表颜色需要在你的css文件中定义: [color=#ed21f3].select-data-list .aeui-this:after, .select-data-list .aeui-this [/color]{   [color=#666]/*下拉列表选中文本颜色与图标颜色*/[/color]   color: #2196F3; } 下面是html:

下拉列表演示(行级):



下拉列表演示(块级):




多行文本-textarea


[点击关闭]快捷面板
手机扫码访问 qrcode