组件 文本框

文本框

文本框允许用户输入、编辑和选择文本。

文本框通常出现在表单中,但也可以出现在其他地方,例如对话框和搜索框。

用法

文本框可以对输入进行验证、帮助修复错误的输入、自动完成输入的词、以及提供输入建议。

文本框类型

单行
多行
文本区域

输入类型

格式化输入
嵌套菜单 & 选择器

Material Design 中的文本框用于用户输入和编辑文本

原则 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

文本框应具有以下特征:

可识别

文本框应使用可点击的触摸目标,指示用户可以输入信息。

容易找到

应该要能很容易的在其他元素中找到文本框。

可读的

文本框应该指明其状态 - 启用还是禁用、为空还是已有文本输入、通过验证还是未通过验证 - 具有清晰的标签、输入框和辅助文本。

布局 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

文本框包含以下元素:

标签

文本框标签显示字段所需的输入类型。每个文本框都应该有一个标签。

标签和输入线对齐,且始终可见。它们可以处于静止状态(当禁用文本框或文本字段为空时)或浮动状态。

Material Design 中的静止状态标签文本

静止状态的标签文本
顶部内边距:16dp
底部内边距:8dp

Material Design 中的浮动标签文本

浮动状态的标签文本
标签上方内边距:16dp
标签下方内边距:8dp
输入框下方内边距:8dp

输入线

输入线表示输入文本的位置,它位于标签下方。

当文本框处于聚焦状态或包含错误时,输入线的颜色和厚度会有所不同。

Material Design 中的标签静止显示在输入框上方

当文本框为空时,标签位于输入线上方静止显示。

Material Design 中标签在文本框聚焦时会浮动

当文本框处于聚焦状态或有输入的文本时,标签会向上浮动。

光标

光标指示用户当前输入的位置。

Material Design 中的光标在标签边缘,输入时移动

光标位于标签边缘,直到用户开始输入时才会移动。

输入文本

向文本框中键入的文本称为输入文本。

输入文本的第一个字母(以及每一个句子的第一个字母)应在适当的时候大写。例如:

  • 命名一些东西,例如一个闹钟
  • 包含短语,例如短信
Material Design 中的聚焦文本框输入文本

在聚焦的文本框中的输入文本

Material Design 文本框中输入文本

输入文本
顶部内边距:8dp
底部内边距:8dp

输入文本可以和自动完成一起使用,以帮助读写能力不好的用户、或使用外语输入的用户。例如自动完成可以:

  • 随着用户输入提供输入建议(每次敲击键盘时都刷新建议)
  • 使用默认的输入文本填充字段

按下返回按钮即接受当前自动完成显示的文本。

Material Design 中的文本不透明度

降低建议文本的不透明度,同时保证输入文本完全不透明。

占位符文本(提示文本)

占位符文本位于输入框中,直到用户开始输入文本。它可以显示一个操作或示例,例如一个手机号或邮件地址。

Material Design 中的文本框占位符文本示例

占位符文本可以在空的文本框中显示,直到用户输入。

Material Design 中的文本框占位符文本

占位符文本
标签上方内边距:16dp
占位符文本上方内边距:8dp
占位符文本下方内边距:8dp

帮助文本

帮助文本提供文本框的有关信息,例如输入的文本会被用在哪里。

它应该持续显示、或只在聚焦时显示。

规格:

  • 左对齐
  • 如果可能的话,尽量保持在单行;有多行文本时,也可以使用换行
Material Design 文本框中的帮助文本提供额外信息

帮助文本可以在文本框下方提供额外的信息。

Material Design 文本框中的帮助文本示例

帮助文本
帮助文本上方内边距:8dp

Material Design 中的占位符文本指导用户输入

帮助文本可以借助占位符文本来指导用户进行输入。

错误信息

当输入存在错误时,可以在输入线下方显示错误信息,并提供如何修复错误的说明。在错误修复之前,错误信息将代替帮助文本。

如果可能的话,错误信息应尽量显示在一行内。

Material Design 中的错误信息帮助用户修复输入错误

错误信息会指导用户修复错误的输入。

Material Design 中的错误信息示例

错误信息
错误信息上方内边距:8dp

错误信息前面带有 “Error” 文本(或者一个错误图标),以使色盲能更清楚的看到错误状态。

Material Design 中的错误信息提示:“Error:”

在错误信息之前的 “Error:” (包含冒号)

Material Design 中的错误信息和图标

错误信息内包含错误图标

必填字段

要指示一个字段是必填的,请在标签旁边显示一个星号(*)。在表单底部,写上星号表示必填字段。

Material Design 中的必填星号指示符

空的文本框中的必填星号指示符

Material Design 中的必填星号指示符

已输入的文本框中的必填星号指示符。

要指示一个字段是可选的,请在标签旁边添加文本 “可选”。

Material Design 中的可选文本提示

空文本框中指示可选的文本

Material Design 的可选文本指示框

已输入的文本框中指示可选的文本

表单中有少量的必填字段时,指示出所有的必填字段。但是,如果只有少量的可选字段,则指示出所有的可选字段,而不必指示出必填字段。

Material Design 中的必填字段有 Name 和 zip code

Name 和 zip code 是表单中仅有的必填字段。

Material Design 中的唯一可选字段是描述

Description 是表单中唯一的可选字段。

字符计数器

文本框有字数限制时,可以使用字符计数器。

规格:

  • 右对齐
  • 显示已输入的字符和字符限制之间的比例(格式为:已输入字符 / 字符限制)
Material Design 中的字符计数器,最多 10 字符,已输入 5

字符计数器显示最多可输入 10 个字符,已输入了 5 个。

Material Design 中的字符计数器示例

字符计数器
输入线下方内边距:8dp

图标符号

图标描述了文本框需要的输入类型。它们显示在文本框左侧。

图标也可以作为的触摸目标。例如,日历图标可以在触摸时展开日期选择器。

Material Design 中的日期输入框图标

日历图标表示此文本框用于输入日期。

Material Design 中的图标符号

图标符号
宽度:24dp
图标符号和标签之间的间距:16dp

语音输入图标

麦克风图标表示用户可以使用语音输入。

语音输入图标右对齐,始终启用。

Material Design 中的语音输入功能

点击图标后,用户可以使用语音进行输入。

Material Design 中的语音输入图标

语音输入图标
宽度:24dp
图标下方内边距:8dp

下拉图标

下拉箭头表示文本框包含一个嵌套的下拉选择。

Material Design 的嵌套下拉选择组件示例

点击下拉箭头,可以展开嵌套的下拉选择组件。

Material Design 下拉箭头容器

下拉箭头容器
宽度:24dp
高度:24dp
图标底部内边距:8dp

清除按钮

清除按钮可以使用户清空整个输入字段。

它们在文本框中右对齐。

Material Design 中的清除图标启用条件

当在文本框中输入字符后,清除图标将启用。

Material Design 中的清除图标

清除图标
宽度:24dp
高度:24dp
图标底部内边距:8dp

在具有很多个字段的表单中,可以缩短文本框。

规格:

  • 输入文本:13sp
  • 减少标签和输入文本之间的间距
  • 减少输入文本和帮助文本之间的间距,减少到 50%
Material Design 中文本框的正常间距

正常间距
标签上方内边距:16dp
标签下方内边距:8dp
输入线上方内边距:8dp
输入线下方内边距:8dp

Material Design 中密集型文本框的间距

密集型间距
标签上方内边距:8dp
标签下方内边距:4dp
输入线上方内边距:8dp
输入线下方内边距:4dp

状态 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

文本框有两个主要状态:启用或禁用。

在启用状态下,可以使用这些交互:

  • 闲置
  • 鼠标悬停
  • 按下
  • 聚焦

文本框输入可以是:

  • 为空或已输入
  • 通过验证或不通过验证
Material Design 中文本框在亮色和暗色主题中的状态

在亮色和暗色主题中的文本框状态

文本框状态

启用

默认情况下,启用的文本框为空。

规格

  • 标签位于输入线上方,且有 8dp 的间距
  • 标签文本和输入文本字体大小相同

无障碍功能

输入线应该具有 3:1 的对比度,以提高可识别性,和大文本相同的 AA 级无障碍标准。

Material Design 亮色主题文本框

亮色主题

输入线

  • 厚度:1dp
  • 颜色:42% 黑色(3:1 的对比度)

标签文本

  • 类型:Roboto 16sp
  • 颜色:54% 黑色(4.5:1 的对比度)
  • 间距:16dp 的顶部内边距,8dp 的底部内边距,和输入线对齐

帮助文本(可选)

  • 字体:Roboto 12sp
  • 颜色:54% 黑色(4.5:1 的对比度)
  • 间距:16dp 的左侧内边距,8dp 的顶部内边距
Material Design 暗色主题文本框

暗色主题

输入线

  • 厚度:1dp
  • 颜色:70% 白色(7:1 的对比度)

标签文本

  • 字体:Roboto 16sp
  • 颜色:70% 白色(7:1 的对比度)
  • 间距:16dp 的顶部内边距,8dp 的底部内边距,和输入线对齐

帮助文本(可选)

  • 字体:Roboto 12sp
  • 颜色:70% 白色(7:1 的对比度)
  • 间距:16dp 的左侧内边距,8dp 的顶部内边距

禁用

禁用的文本框是不能编辑的。它们使用虚线作为输入线,以及使用较低的不透明度,使它们看起来不可点击。

Material Design 禁用状态的亮色主题文本框

亮色主题

输入线

  • 厚度:1dp
  • 颜色:42% 黑色
  • 虚线

标签文本

  • 字体:Roboto 12sp
  • 颜色:38% 黑色(2.21:1 的对比度)
  • 间距:8dp 的底部内边距,和输入线对齐

输入文本

  • 字体:Roboto 16sp
  • 颜色:42% 黑色(3:1 的对比度)
  • 间距:8dp 的顶部内边距,和输入线对齐
Material Design 禁用状态的暗色主题文本框

暗色主题

输入线

  • 厚度:1dp
  • 颜色:70% 白色
  • 虚线

标签文本

  • 字体:Roboto 12sp
  • 颜色:50% 白色(4.5:1 的对比度)
  • 间距:8dp 的底部内边距,和输入线对齐

输入文本

  • 字体:Roboto 16sp
  • 颜色:50% 白色(4.5:1 的对比度)
  • 间距:8dp 的顶部内边距,和输入线对齐

用户交互

鼠标悬停

悬停状态给了输入线更多的不透明度,使文本框在桌面端更加醒目。

亮色主题

输入线

  • 厚度:2dp
  • 颜色:87% 黑色(15:1 的对比度)

标签文本

  • 字体:Roboto 16sp
  • 颜色:54% 黑色(4.5:1 的对比度)
  • 间距:8dp 的底部内边距,和输入线对齐

帮助文本(可选)

  • 字体:Roboto 12sp
  • 颜色:54% 黑色(4.5:1 的对比度)
  • 间距:8dp 的顶部内边距,和输入线对齐

暗色主题

输入线

  • 厚度:2dp
  • 颜色:100% 白色(13:1 的不透明度)

标签文本

  • 字体:Roboto 16sp
  • 颜色:70% 白色(7:1 的对比度)
  • 间距:8dp 的底部内边距,和输入线对齐

帮助文本(可选)

  • 字体:Roboto 12sp
  • 颜色:70% 白色(7:1 的对比度)
  • 间距:8dp 的顶部内边距,和输入线对齐

按下

按下时,文本框标签缩小并浮动到字段上方,显示出光标和占位符文本。

为了指示出该字段已被激活,在输入线、标签文本和光标上使用 UI 的主色。

亮色主题

输入线

  • 厚度:2dp
  • 颜色:100% 主色(暗色 A700)
  • 动效:涟漪

标签文本

  • 字体:Roboto 12sp
  • 颜色:87% 主色(暗色 A700)
  • 间距:8dp 的底部内边距,和输入线对齐

占位符文本(可选)

  • 字体:Roboto 16sp
  • 颜色:42% 黑色(3:1 的对比度)
  • 间距:8dp 的底部内边距,和输入线对齐

帮助文本(可选)

  • 字体:Roboto 12sp
  • 颜色:54% 黑色(4.5:1 的对比度)
  • 间距:8dp 的顶部内边距,和输入线对齐

暗色主题

输入线

  • 厚度:2dp
  • 颜色:100% 主色(亮色 A200)
  • 动效:涟漪

标签文本

  • 字体:Roboto 12sp
  • 颜色:100% 主色(亮色 A200)
  • 间距:8dp 的底部内边距,和输入线对齐

占位符文本(可选)

  • 字体:Roboto 16sp
  • 颜色:50% 白色(4.5:1 的对比度)
  • 间距:8dp 的底部内边距,和输入线对齐

帮助文本(可选)

  • 字体:Roboto 12sp
  • 颜色:70% 白色(7:1 的对比度)
  • 间距:8dp 的顶部内边距,和输入线对齐

聚焦

当用户在文本框中输入文本时,输入的文本会代替占位符文本。自动完成的文本显示在光标的右侧,且使用和占位符文本相同的字体大小和颜色。

Material Design 聚焦状态的亮色主题文本框

亮色主题

输入线

  • 厚度:2dp
  • 颜色:100% 主色(暗色 A700)

标签文本

  • 字体:Roboto 12sp
  • 颜色:87% 主色(深色 A700)
  • 间距:16dp 的顶部内边距和 8dp 的底部内边距

输入文本

  • 字体:Roboto 16sp
  • 颜色:87% 黑色(15:1 的对比度)
  • 间距:8dp 的底部内边距,和输入线对齐

帮助文本(可选)

  • 字体:Roboto 12sp
  • 颜色:54% 黑色(4.5:1 的对比度)
  • 间距:8dp 的顶部内边距,和输入线对齐

暗色主题

输入线

  • 厚度:2dp
  • 颜色:100% 主色(亮色 A200)

标签文本

  • 字体:Roboto 12sp
  • 颜色:100% 主色(亮色 A200)
  • 间距:16dp 的顶部内边距和 8dp 的底部内边距

输入文本

  • 字体:Roboto 16sp
  • 颜色:100% 白色(13:1 的对比度)
  • 间距:8dp 的底部内边距,和输入线对齐

帮助文本(可选)

  • 字体:Roboto 12sp
  • 颜色:70% 白色(7:1 的对比度)
  • 间距:8dp 的顶部内边距,和输入线对齐

文本框输入

闲置和已输入

当用户把焦点切换到另一个元素时,已输入的文本会保持可见。

Material Design 亮色主题的文本框输入状态

亮色主题

输入线

  • 厚度:1dp
  • 颜色:42% 黑色(3:1 的对比度)

标签文本

  • 字体:Roboto 12sp
  • 颜色:54% 黑色(4.5:1 的对比度)
  • 间距:16dp 的顶部内边距和 8dp 的底部内边距

输入文本

  • 字体:Roboto 16sp
  • 颜色:87% 黑色(15:1 的对比度)
  • 间距:8dp 的底部内边距,和输入线对齐

帮助文本(可选)

  • 字体:Roboto 12sp
  • 颜色:54% 黑色(4.5:1 的对比度)
  • 间距:8dp 的顶部内边距,和输入线对齐
Material Design 暗色主题的文本框输入状态

暗色主题

输入线

  • 厚度:1dp
  • 颜色:70% 白色(7:1 的对比度)

标签文本

  • 字体:Roboto 12sp
  • 颜色:70% 白色(7:1 的对比度)
  • 间距:16dp 的顶部内边距和 8dp 的底部内边距

输入文本

  • 字体:Roboto 16sp
  • 颜色:100% 白色(13:1 的对比度)
  • 间距:8dp 的底部内边距,和输入线对齐

帮助文本(可选)

  • 字体:Roboto 12sp
  • 颜色:70% 白色(7:1 的对比度)
  • 间距:8dp 的顶部内边距,和输入线对齐

文本框内容

错误

如果文本框没有通过验证,当用户将焦点移动到另一个元素时,会显示错误信息。要指示一个错误,可以在输入线和标签上使用较暖色调的颜色,例如红色或橙色。

规格

  • 在文本框下方显示错误信息,代替帮助文本
  • 简要说明错误的原因,以及如何解决错误
  • 在错误信息前添加 “Error”(或者错误图标)
  • 一旦用户修复了错误,就删除错误信息
Material Design 亮色主题的错误状态文本框

亮色主题

输入线

  • 厚度:2dp
  • 颜色:100% 红色(A400)

标签文本

  • 字体:Roboto 12sp
  • 颜色:100% 红色(A400)
  • 间距:16dp 的顶部内边距和 8dp 的底部内边距,和输入线对齐

输入文本

  • 字体:Roboto 16sp
  • 颜色:87% 黑色(15:1 的对比度)
  • 间距:16dp 的左侧内边距,8dp 的底部内边距

错误文本

  • 字体:Roboto 12sp
  • 颜色:87% 红色(A400)
  • 间距:8dp 的顶部内边距,和输入线对齐

暗色主题

输入线

  • 厚度:2dp
  • 颜色:100% 红色(A400)

标签文本

  • 字体:Roboto 12sp
  • 颜色:100% 红色(A400)
  • 间距:16dp 的顶部内边距和 8dp 的底部内边距,和输入线对齐

输入文本

  • 字体:Roboto 16sp
  • 颜色:100% 白色(13:1 的对比度)
  • 间距:16dp 的左侧内边距,8dp 的底部内边距

错误文本

  • 字体:Roboto 12sp
  • 颜色:100% 红色(A400)
  • 间距:8dp 的顶部内边距,和输入线对齐

文本框类型 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

文本框有多种类型:

  • 单行
  • 多行
  • 文本区域

单行文本框

当输入的文本长度超过文本框的长度时,当光标到达文本框右边缘时,它会自动向左滚动。

当光标达到单行文本框的右侧时,输入文本会向左滚动。

Material Design 中的单行文本框

单行文本框

Material Design 中的单行文本框

单行文本框

多行文本框

多行文本框通过扩展文本框的底部,把文本换行到新的一行上,并把屏幕中位于文本框下方的元素向下移动。

多行文本框允许用户一次性看到他们输入的所有内容。

当光标到达文本框右侧时,输入文本换行到新的一行,并使该文本框增高。

Material Design 中的多行文本框

多行文本框

Material Design 中的多行文本框

多行文本框

文本区域

文本区域比文本框要高,并可将溢出的文本换行到新行上。当光标到达文本区域的底部时,它们会垂直滚动。

当光标到达文本区域的右下角时,输入文本会向上滚动。

Material Design 中的消息框文本区域

此消息框是一个文本区域

Material Design 中的消息框文本区域

此消息框是一个文本区域

文本区域应该有一个可见的边框,边框颜色和厚度和输入线相同。

Material Design 中的亮色与暗色文本区域

亮色和暗色状态的文本区域

输入类型 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

格式化输入

文本框可以通过使用占位符文本、预设布局、和字数限制,来表示可以输入的数据类型。只有在按下、聚焦或输入文本时才应显示文本格式。

字符可以使用以下方式进行格式化:

  • 分组字符
  • 前缀和后缀
  • 密码编辑

分组字符

输入文本可以以不同的方式进行分组,并在适当的位置添加特殊字符,例如添加到电话号码上的连字符。一旦完成第一个特殊字符,光标会自动跳转到下一个分组。

Material Design 中的电话号码输入格式化示例

为了表示电话号码,对输入文本进行了分组和格式化

Material Design 中的信用卡号码输入格式化

为了表示信用卡号码,对输入文本进行了分组和格式化

前缀 & 后缀

前缀和后缀可用于明确单位、或添加预输入文本。前缀在文本框中左对齐;后缀在文本框中右对齐。文本框可以同时拥有前缀和后缀。

Material Design 文本框中的美元前缀

美元前缀

Material Design 文本框中的重量后缀

重量后缀

Material Design 文本框中的邮箱域名后缀

邮箱域名后缀

Material Design 文本框中的时区后缀

时区后缀

密码修改

密码输入默认会隐藏密码。每个密码字符都用一个居中的椭圆表示(例如 •••••••)。

当文本框中显示可见性图标时,它指示该字段输入的时候是否可见。可以通过该图标来切换输入文本的可见性。

Material Design 中的可见性图标及密码显示

当开启可见性时,可见性图标会显示,且密码字符可见。

Material Design 中的可见性图标和密码字符隐藏

当关闭可见性时,可见性图标会显示,且密码字符会隐藏。

其他输入

菜单和选择器

其他组件(如下拉菜单选择器)可以嵌套在文本框中,使输入更方便。

Material Design 中的美国州选择下拉菜单

用于选择美国州的文本框下拉菜单

Material Design 的日期选择文本框

用于选择日期的文本框选择器

文本框变体 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

使用这些样式的变体来把额外的焦点添加到文本框:

  • 用标签作为标题
  • 单独的文本框
  • 全宽文本框

用标签作为标题

当文本框是屏幕上的主要操作时,可以移除它的标签,或者把标签当作标题。

占位符文本在闲置状态会出现,在用户输入文本时,输入的文本会代替占位符文本。

Material Design 中的标签可移除,显示为标题

标签可以从文本框中移除,并作为标题显示。

Material Design 中的标签可作为对话框标题显示

标签可以从文本框中移除,并作为对话框中的标题显示。

单独的文本框

当文本框只用于单个操作(如搜索)时,文本框可以被提升,并将关联的图标置于文本框中。不需要输入线。

在桌面端,在搜索框右侧应该有一个浮动的搜索按钮。

Material Design 中的浮动文本框搜索操作

桌面端,浮动文本框形式的搜索操作

移动端的 Material Design 浮动搜索框

移动端,浮动文本框形式的搜索操作

Material Design 中的应用栏和文本输入框

应用栏作为文本输入框

Material Design 中的嵌套文本输入框

应用栏中有一个嵌套的文本输入框

全宽文本框

全宽文本框对于更深入的任务或输入复杂信息会很有用。

Material Design 中的全宽文本框

全宽文本框

Material Design 中的全宽文本框可单行或多行输入

全宽文本框可以拥有单行或多行文本框的行为

Material Design 中的全宽文本框

普通间距的全宽文本框
高度:56dp
顶部内边距:20dp
底部内边距:20dp

Material Design 中的全宽紧凑文本框

紧凑型间距的全宽文本框
高度:48dp
顶部内边距:16dp
底部内边距:16dp

文本字段框 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

文本字段框使用透明的矩形包裹住标签和输入文本,以增强文本框的可识别性和可扫描性。

文本字段框使用颜色来使其更容易被发现,同时保留了输入线。

状态

文本字段框使用矩形填充作为主要特征,遮盖住输入线的末端。涟漪动效在鼠标悬停和按下时触发。

Material Design 中的矩形文本框状态

包裹着矩形的文本框状态

矩形填充

  • 高度:56dp
  • 圆角半径:4dp
  • 颜色(亮色主题):6% 黑色
  • 颜色(暗色主题):10% 白色

输入线

  • 厚度:2dp
  • 被矩形的圆角遮住

闲置状态 & 为空状态

  • 左侧内边距:16dp
  • 右侧内边距:16dp
  • 标签上方内边距:8dp

鼠标悬停

  • 左侧内边距:16dp
  • 标签上方内边距:20dp
  • 标签下方内边距:20dp

按下

  • 标签上方内边距:8dp
  • 标签下方内边距:8dp
  • 占位符下方内边距:8dp

聚焦、闲置、已输入、错误和禁用状态的间距和按下状态相同。

密集型布局

文本字段框使密集型布局更容易阅读。

Material Design 普通间距的文本框

普通间距
高度:56dp
标签上方内边距:8dp
标签下方内边距:8dp
文本框下方内边距:8dp
帮助文本上方内边距:8dp

Material Design 密集型间距的文本框

密集型间距
高度:44dp
标签上方内边距:8dp
标签下方内边距:4dp
文本框下方内边距:8dp
帮助文本上方内边距:4dp

单行文本字段框

单行文本字段框中的文本滚动行为

Material Design 单行文本字段框,带标签标题

单行文本字段框,使用标签作为标题

多行文本字段框

多行文本字段框中的文本换行和滚动行为

Material Design 的多行文本字段框按下状态

按下状态的多行文本字段框

Material Design 中的多行文本输入框状态

闲置和已输入状态的多行文本字段框

文本框区域

文本框区域的文本换行和滚动行为

Material Design 中的空闲文本区域

为空和闲置的文本区域

Material Design 中的按下状态文本区域

按下状态的文本区域

菜单 & 选择器

Material Design 中的矩形文本框下拉列表

矩形文本框中的下拉列表

Material Design 中的图标和日期选择器

矩形文本框中的图标和日期选择器