增加 CSS 中文本字段的大小

Question

我正在尝试模拟这个网站：

为此，我有以下 html 代码：

<div class= "grid">
        <div class= "contact" id= "title">
        <h2 class= "heading font-x2"> Contact message </h2> 
        </div>
  <div class= "contact">
            <img src="01130_bigsurlighthouse_1920x1080.jpg" width="auto" height="200">
        </div>
        <div  class="contact" id= "contact" style = "color: steelblue">
            <p class = "contact">Here, the input field gets a color when it gets focus (clicked on):</p>

            <form id = "">
              
              <input type="text" id="fname" name="fname" placeholder="First Name">
            </form>
            <form id = "form">
              
              <input type="text" id="lname" name="lname" placeholder="Last Name">
            </form>
            
            
      </form>
        </div>

我的 CSS 文件如下所示：

.contact {
    color: black;
    background: white;
    font-family:Georgia, "Times New Roman", Times, serif;
    
    
}
.heading{margin-bottom:20px; font-size:4rem;}
#title{
    
    grid-column: 1 / 3;
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align: center;
}
.font-x2{font-size:1.6rem;}
#service{
    color:green;
    float:center; margin:0 0 20px 0;
    display: inline-block;
    border: 0px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

#form {
    border: 2px solid #ccc;
    box-sizing: 203px;
    
    
}
.grid   {
    display: grid;
    grid-template-columns: 1fr 1fr;
 }

.grid div:nth-child(even) {
    
background-color: red;
}
.grid div:nth-child(odd) {
    
background-color: green;
}

这会生成一个 contactus 页面，如下所示：

我知道至少可以说颜色不对。我想知道的是如何在 CSS 样式表中使文本字段变大。如您所见，他们没有增加字体大小来增加输入字段的大小。我的第二个问题是我必须创建 2 个表单以便堆叠输入字段。有没有办法将输入字段堆叠在 CSS 本身中？您能告诉我如何实现吗？

Answer 1

将此添加到您的 CSS 以增加输入字段的字体大小

input { 
  font-size: 4em;
}

Answer 2

您想在右侧的容器上使用 display: flex 让子项垂直对齐，align-items: stretch 有助于使它们尽可能宽。我还在 form 和固定 ID 下合并了 input 和 p（在 css 中你引用了 non-existing #form id）。

.contact {
    color: black;
    background: white;
    font-family:Georgia, "Times New Roman", Times, serif;
}

.heading {
    margin-bottom:20px; font-size:4rem;
}

#title {
    grid-column: 1 / 3;
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align: center;
}

.font-x2 {
    font-size: 1.6rem;
}

#service{
    color:green;
    float:center; margin:0 0 20px 0;
    display: inline-block;
    border: 0px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

#names {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#names > * {
    padding: 0.5em;
    margin: 0 1em 1em;
}

#names input {
    font-size: 1.1em;
    border: 0;
    outline: 0;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid div:nth-child(even) {
    background-color: red;
}

.grid div:nth-child(odd) {
    background-color: green;
}

<div class= "grid">
  <div class= "contact" id= "title">
    <h2 class= "heading font-x2"> Contact message </h2> 
  </div>
  <div class="contact">
  </div>
  <div class="contact" id="contact" style="color: steelblue">
    <form id="names">
      <p class="contact">
        Here, the input field gets a color when it gets focus (clicked on):
      </p>
            
      <input type="text" id="fname" name="fname" placeholder="First Name">
      <input type="text" id="lname" name="lname" placeholder="Last Name">
    </form>
  </div>
</div>

Answer 3

你好，关于你的第二个问题，你可以将它们放在一个表格中。如果您提交表单，这会很方便，因为您只需提交一个而不是多个表单。

<form id = "contact-form">
  <input type="text" id="fname" name="fname" placeholder="First Name">
  <input type="text" id="lname" name="lname" placeholder="Last Name">
</form>

然后您可以在 css #contact-form 中设置联系表单的样式，以便将表单堆叠或放在列中。我会建议 display:block 或 display:flex + flex-direction: column（我更喜欢 flex，因为它更有用，因为你也可以 align-items 在 div 中你想要的地方，例如 align-items: center 或使用 justify-content: space-between 或 space-around 播放元素将放置在 div.

中的位置

#contact-form {
  display: flex;
  flex-direction: column;
}

现在，回到你的第一个问题。要更改输入大小，您可以直接将 css 应用于 input 标签。请注意，输入可以是不同的类型，例如 text、email、password 等。为了对不同的字体应用不同的样式，您可以在 [=] 上访问它们 input[text] 52=]。您还可以通过在 css 上选择 input 将相同的样式应用到所有 inputs。例如，您可以尝试以下操作：

input[type="text"] {
    font-size: 16px;
    width=150px
    height=20px
}

您还可以直接在 html 文件中使用内联样式在输入标签中指定 width 和 height。

<input type="text" id="name" style="width: 200px; height: 40px">

您可以在 input 标签内定义尺寸（即宽度），如下所示：

<input type="text" id="name" size="200">

在您的 input 中，您还可以定义不同的约束条件，例如 minlength = 该输入字段允许的最小长度，或 required 以便在您提交表单时需要提交，等等...

此外，如果您有兴趣，还可以使用 javascript 来设置 iinput 的样式。看看https://www.techiedelight.com/set-width-input-textbox-html-css-javascript/

增加 CSS 中文本字段的大小

Increasing the size of the text field in CSS

html

css