CSS：输入标签的大小属性 in class

Question

我有以下代码：

<!doctype html>
<html>
<head>
  <title>Rich Home</title>  
  <meta charset="utf-8"> 
  <style>
    body { background-color: Black; color: White; }
    h1 {text-align: center}
    .st{ color: Green; background-color: Yellow; size: "80"; type:"text" }
  </style>    
</head>

<body>
  <h1>Rich's Home Page</h1>
  <form action="https://google.com/search" method="get">
    Google: <input class=st name="q" autofocus>
    <input type="submit" value="=>">
  </form>
  <form action="https://duckduckgo.com" method="get">
    Duck: <input class=st name="q">
    <input type="submit" value="=>">
  </form>  
</body>
</html>

我在 Firefox、Chrome 和 Chromium 中打开过。 color 和 background-color 应用于两个输入框，但 size 没有。这是为什么？

根据各种答案评论进行编辑。使用以下行无效：

.st{ color: Green; background-color: Yellow; width: "600px"; type:"text" }

Answer 1

CSS中没有"size"属性。它是标记属性。如果要使用 CSS 指定元素的宽度或高度 - 使用：

.st {
    width: 80px;
}

并且您不能使用 CSS 设置元素类型。改为设置属性：

<input class=st name="q" type="text" autofocus>

您还可以使用属性指定宽度：

<input class=st name="q" type="text" width="50" autofocus>

Answer 2

属性 "size" 在 CSS 中不存在，你必须指定 width and height .st{ color: Green; background-color: Yellow; width: 80px; type:"text" }

应该可以。

Answer 3

检查这个你可以简单地为其他文本类型定义 class，比如 "input[type="number"] "

input[type="text"] {
  display: block;
  margin: 0;
  width: 60%;
  font-family: sans-serif;
  font-size: 25px;
  appearance: none;
  box-shadow: none;
  border-radius: 5px;
}
input[type="text"]:focus {
  outline: none;
}

<input type="text" placeholder="name" />

CSS：输入标签的大小属性 in class

CSS: size property in class for input tags

css

html-input

CSS：输入标签的大小 属性 in class

CSS: size property in class for input tags

css

html-input

CSS：输入标签的大小属性 in class