讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

标题重写为：如何在CSS中调整所有输入区域的文本大小（包括电子邮件注册、评论框和菜谱索引页面下拉菜单）？

P粉465675962 2023-09-14 15:17:43

[CSS3讨论组]

1129

网站：https://olivesfordinner.com/

寻找能实现以下效果的CSS代码：

在主页上输入电子邮件以注册时，使文本变大。它太小了。
在菜谱帖子上留下评论时（例如：https://olivesfordinner.com/toasted-muesli-recipe/），如何使读者在输入时文本变大。同样，这个文本太小了。
如何使左侧栏的下拉文本框中的文本变大。它们太小了！https://olivesfordinner.com/recipe-index/

谢谢！

我已经搜索了很多CSS代码，但是我找到的没有一个能影响这些区域的文本大小。

P粉465675962

全部回复(2)

P粉4935341052023-09-15 13:06:26 2楼

字体大小设置如下

input, select, textarea {
    ....
    font-size: 11px;
    font-style: italic;
    ....
}

这将把 input、select 和 textarea 元素的字体大小设置为 11px。

修复方法

1 - 您可以将 font-size 更新为所需的大小

input, select, textarea {
    ....
    font-size: 20px;
    ....
}

但请注意，这会影响网站中所有的 input、select 和 textarea 元素

2 - 您可以创建一个具有所需 font-size 的新类

.font-size-20 {
    font-size: 20px;
}

将此类添加到需要更大字体大小的元素中，例如

<input class="font-size-20" id="email" name="email" type="email">

赞 +0

添加回复

P粉4208682942023-09-15 10:16:01 1楼

问题1

这将增加您的通过电子邮件获取新食谱的注册元素的字体大小

.enews-form > #subbox {
    font-size: 12pt !important;
}

.enews-form > input[type=submit] {
    font-size: 12pt !important;
}

问题2

这将修复此问题

#commentform textarea#comment, #commentform input#author, #commentform input#url {
    font-size: 13pt !important;
}

问题3

这将修复下拉列表

select#cat, select#archives-dropdown-2 {
    font-size: 12pt;
}

注意

您可以将每个问题的自定义CSS添加到每个页面或全局中，如下所示

/* 问题1的解决方案 */
.enews-form > #subbox {
    font-size: 12pt !important;
}
.enews-form > input[type=submit] {
    font-size: 12pt !important;
}

/* 问题2的解决方案 */
#commentform textarea#comment, #commentform input#author, #commentform input#url {
    font-size: 13pt !important;
}

/* 问题3的解决方案 */
select#cat, select#archives-dropdown-2 {
    font-size: 12pt;
}

请注意，此CSS代码仅对各自的元素起作用，不同于其他答案中的CSS代码。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>