<#def title = "输入框样式"/> <#def keyword = "ZhiqimUI"/> <#def desc = "输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。"/> <#def prevUrl = "../js/query.htm"/> <#def nextUrl = "button.htm"/> ${zhiqim_com_head()} ${zhiqim_com_head_main()} ${zhiqim_com_head_end()} ${zhiqim_com_mobileUI_scrollJs()} ${zhiqim_com_body()} ${zhiqim_com_topnav("ui")}
${zhiqim_com_container_ui("ZmUI", "form", "input")}
${zhiqim_com_breadcrumb("UI", "ZmUI", "表单", "输入框")}
<#-- 标题 -->

输入框样式：

输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。

<#-- 一、输入框长度大小样式 -->
一、输入框长度大小样式（默认边框灰色）
类型 效果预览 代码
默认input样式 





    加大尺寸input
    
    





    大尺寸input
    
    





    小尺寸input
    
    





    加小尺寸input
    
    






<#-- 二、输入框选中时颜色 -->

二、输入框选中时颜色






    类型
    效果预览
    代码




    触发边框为红色
    
    





    触发边框为橙色
    
    





    触发边框为黄色
    
    





    触发边框为绿色
    
    





    触发边框为青色
    
    





    触发边框为蓝色
    
    





    触发边框为紫色
    
    







<#-- 三、输入框联合体 -->

三、输入框联合体






    说明
    验证
    效果预览




    指示图标前置
    

    





    指示图标后置
    

    





    指示图标两边
    

    





    指示图标置中
    

    





    加大尺寸
    

    





    大尺寸
    

    





    小尺寸
    

    





    加小尺寸
    

    






<#-- 四、输入框输入控制 -->

四、输入框输入控制






    说明
    验证
    效果预览




    只允许输入数值型：
    
    





    只允许输入整型：
    
    





    只允许输入整数小数：
    
    





    只允许输入字母：
    
    





    只允许最多2位小数的金额：
    
    





    只允许输入折扣类型：
    
    





    只允许小时分钟格式(00:23)：
    
    









${zhiqim_turorial_ZmUI_demo_start()}


    
    
ZhiqimUI.mobile





    文案
    文案
    文案
    文案




    
这里是内容



${zhiqim_turorial_ZmUI_demo_end()}





${zhiqim_com_chapter()}








${zhiqim_com_footer()}