在 CSS 文件中设置 HTML 表单样式答案

【问题标题】：Style HTML Form in CSS File在 CSS 文件中设置 HTML 表单样式
【发布时间】：2017-07-12 13:59:06
【问题描述】：

上下文：我正在制作一个网页，用户在其中输入数据，例如打开窗帘的时间，使用我的 Raspberry Pi 3 和 ESP8266 和电机，它将根据给定的时间打开窗帘，这不是问题.我有一个 html 文件和一个用于设置 HTML 样式的 CSS 文件。

所以问题是，“如何在我的 CSS 文件中为我的表单设置 HTML 样式”，如果是这样，我如何设置特定表单而不是所有表单的样式。

<html>
<body>
<form action ="." method="POST">
<br>Time to open curtain: </br>
<input type="text" name="CurtainOpenTime" placeholder="Default Open Time: 8am">
<input type="submit" name="SubmitCurtainTimes" value="Execute">
</form>
</body>
</html>

【问题讨论】：

w3.org/Style/Examples/011/firstcss.en.html
您应该遵循HTML 和CSS 教程而不是在这里询问...w3schools.com 是一个很好的起点
是的，我先去了 w3schools.com，他们使用了其他方法，但这个 stackoverflow 线程中提供的答案是最简单易懂的。谢谢你的时间:)

标签： html css forms styles

【解决方案1】：

通过给它一个类。

在 CSS 中

.my_form
{
    color: #f00;
}

在 HTML 中

<form class="my_form">

</form>

【讨论】：

好的，非常感谢您的快速响应和解决方案。
@ThePGT 接受答案，如果它对你有用 - 给他们一些好的业力
我试过了，但它说我必须等待 7 分钟，现在它说 1 分钟，所以我会在一分钟内完成。

【解决方案2】：

每个表单都可以有一个唯一的 ID，在下面的示例中，我将其命名为窗帘。元素的样式仅受您的幻想限制。我在下面做了几个例子。

.text {
  margin: 1em 0;
  color: red;
}

input[type="text"] {
height: 2em;
font-size: 2em;
}

input[type="submit"] {
height: 2em;
margin-top: 1em;
width: 6em;
background-color: blue;
color: white;
font-size: 1.5em;
border: thin solid lightblue;
border-radius: 1em;
}

<form id="curtains" action="." method="POST">
  <div class="text">Time to open curtain:</div>
      <input type="text" name="CurtainOpenTime" placeholder="Default Open Time: 8am"><br>
      <input type="submit" name="SubmitCurtainTimes" value="Execute">
</form>

【讨论】：

元素的造型只受限于你的幻想？这应该是什么意思？（虽然投反对票的不是我）
@Gerard，是的，我确实找到了，但我希望通过单独进行更多自定义，但非常感谢您的时间我会为您的时间 +1 我真的非常感谢谢谢你！ :)
@Red - 我不在乎反对票。只是想在这里提供一点帮助。这不是比赛。
@Gerard 我知道你不在乎反对票。我只是想知道Styling of the elements is only limited by your phantasy 是什么意思:)
意思是你可以做任何你能想到的事情。