How to make text bigger in all input areas (email signup, comment box, recipe index page dropdown) in CSS?

huangapple go评论58阅读模式
英文:

How to make text bigger in all input areas (email signup, comment box, recipe index page dropdown) in CSS?

问题

网站: https://olivesfordinner.com/

寻找可以实现以下效果的CSS代码:

1. 在主页上输入电子邮件以订阅时,使文本变大。它太小了。

2. 在菜谱帖子上留下评论时(示例:https://olivesfordinner.com/toasted-muesli-recipe/),如何在读者输入时使文本变大。同样,这个文本太小了。

3. 如何使左侧列中的下拉文本框中的文本看起来更大。它们太小了!https://olivesfordinner.com/recipe-index/

谢谢!

我已经搜索了许多CSS代码,但我找到的任何内容都没有影响到这些区域的文本大小。
英文:

Website: https://olivesfordinner.com/

Looking for CSS code that will achieve the following:

  1. When typing in email on homepage to sign up for newsletter, making that text appearbigger. It's so small.

  2. When leaving a comment on a recipe post (example: https://olivesfordinner.com/toasted-muesli-recipe/), how to make the text bigger as the reader is typing within it. Again, this text is so small.

  3. How to make the text appear bigger in the drop-down text boxes on the left-hand column. They are so tiny! https://olivesfordinner.com/recipe-index/

Thank you!

I have googled lots of CSS code, but nothing I've found has affected the text size in these areas at all.

答案1

得分: 0

这将inputselecttextarea元素的字体大小设置为11px

修复

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

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

但请注意,这将影响网站中所有inputselecttextarea元素。

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

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

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

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

The font size is setting with this

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

This sets the font size of the input, select and textarea elements to 11px.

Fix

1 - You can update font-size into required size

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

But note, this will effect all the input, select and textarea elements in the website

2 - You can create a new class with the required font-size

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

add this class with elements you need bigger font size, like

&lt;input class=&quot;font-size-20&quot; id=&quot;email&quot; name=&quot;email&quot; type=&quot;email&quot;&gt;

答案2

得分: 0

以下是翻译好的部分:

用以下选择器并更改 font-size

对于标题电子邮件订阅、下拉文本和评论:

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

对于搜索:

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

页脚电子邮件订阅:

.footer-widgets .enews-widget input{
    font-size: 20px;
}
英文:

Just use the following selectors and change the font-size

For Header email subscription, drop-down text and comment:

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

For search:

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

Footer email subscription:

.footer-widgets .enews-widget input{
    font-size: 20px;
}

答案3

得分: 0

问题 1

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

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

.enews-form &gt; 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 &gt; #subbox {
    font-size: 12pt !important;
}
.enews-form &gt; 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 代码那样。

英文:

Issue 1

This will increase the font size for your Sign up to get new recipes via email. element

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

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

Issue 2

This will fix this issue

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

Issue 3

This will fix the dropdown lists

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

Notice

you can add each to the custom css for each page or globally as such

/* Issue 1 Solver */
.enews-form &gt; #subbox {
    font-size: 12pt !important;
}
.enews-form &gt; input[type=submit] {
    font-size: 12pt !important;
}

/* Issue 2 Solver */
#commentform textarea#comment, #commentform input#author, #commentform input#url {
    font-size: 13pt !important;
}

/* Issue 3 Solver */
select#cat, select#archives-dropdown-2 {
    font-size: 12pt;
}

Do know that this CSS code will only effect their respective elements, unlike the css code by others' answers.

huangapple
  • 本文由 发表于 2023年7月10日 20:44:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/76653870.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定