前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WordPress 后台样式:输入框 input class

WordPress 后台样式:输入框 input class

作者头像
Denis
发布2023-04-14 13:43:39
6470
发布2023-04-14 13:43:39
举报
文章被收录于专栏:WordPress果酱WordPress果酱

我们在 WordPress 后台创建表单的时候,可以使用一些预定义好的 class 来定义输入框的宽度,而不需自己写样式,下图就是常用的输入框样式的效果:

WordPress 后台样式:输入框 class
WordPress 后台样式:输入框 class

下面我们详细讲解一下的:

最常用的是 regular-text,宽度为25em:

代码语言:javascript
复制
.regular-text {
	width: 25em;
}

如果你要通栏显示,可以用 large-text,宽度为99%:

代码语言:javascript
复制
input.large-text,
textarea.large-text {
	width: 99%;
}

如果小文本,可以使用 small-text,宽度为50px:

代码语言:javascript
复制
input.small-text {
	width: 50px;
	padding: 1px 6px;
}

如果是 number 类型的话,会大一点,宽度为65px:

代码语言:javascript
复制
input[type="number"].small-text {
	width: 65px;
}

还要更小的话:WordPress 还有 tiny-text,宽度为35px:

代码语言:javascript
复制
input.tiny-text {
	width: 35px;
}

同样如果是 number 类型的话,会大一点,宽度为45px:

代码语言:javascript
复制
input[type="number"].tiny-text {
	width: 45px;
}

如果想介于常规和小文本之间,WordPress 还提供了一个 all-options,这个名字不知道什么意思,宽度为250px:

代码语言:javascript
复制
textarea.all-options,
input.all-options {
	width: 250px;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档