CSS 表单

一个表单案例，我们使用 css 来渲染 html 的表单元素：

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
 
input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
input[type=submit]:hover {
  background-color: #45a049;
}
 
div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

input字段样式

使用width属性确定输入字段的宽度：

input {
     width: 100%;
 }

上面的示例适用于所有<input>元素。如果您只想设置特定输入类型的样式，则可以使用属性选择器：

input[type=text] - 只会选择文本字段

input[type=password] - 只会选择密码字段

input[type=number] - 只会选择数字字段

等等..

input内边距（padding）

使用padding属性在文本字段中添加空格。提示：当您有许多输入后，您可能还想添加一些margin，以在它们之外添加更多空间：

input[type=text] {
          width: 100%;
          padding: 12px 20px;
          margin: 8px 0;
          box-sizing: border-box;
}

请注意，我们已将box-sizing属性设置为border-box。这可确保填充和最终边框包含在元素的总宽度和高度中。

input边界（border）

使用border属性更改边框大小和颜色，并使用border-radius属性添加圆角：

input[type=text] {
          border: 2px solid red;
          border-radius: 4px;
}

如果您只想要底部边框，请使用以下border-bottom属性：

input[type=text] {
          border: none;
          border-bottom: 2px solid red;
}

input彩色

使用background-color属性为输入添加背景颜色，使用color属性更改文本颜色：

input[type=text] {
      background-color: #3CBC8D;
      color: white;
}

input获得焦点

默认情况下，某些浏览器在获得焦点（单击）时会在input周围添加蓝色轮廓。您可以通过添加outline: none;到input来删除此行为。使用:focus选择器在获得焦点时对输入字段执行某些操作：

input[type=text]:focus {
   background-color: lightblue;
}

input[type=text]:focus {
   border: 3px solid #555;
}

input图标/图像

如果要在输入中包含图标，请使用background-image属性并将其与background-position属性一起定位。另请注意，我们添加了一个大的左边距以保留图标的空间：

input[type=text] {
          background-color: white;
          background-image: url('searchicon.png');
          background-position: 10px 10px; 
          background-repeat: no-repeat;
          padding-left: 40px;
}

input动画搜索

在此示例中，我们使用CSS transition属性在焦点获得焦点时为搜索输入的宽度设置动画。

input[type=text] {
          -webkit-transition: width 0.4s ease-in-out;
          transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
          width: 100%;
}

textarea样式

提示：使用resize属性可以防止调整textareas的大小（禁用右下角的“抓取器”）：

textarea {
          width: 100%;
          height: 150px;
          padding: 12px 20px;
          box-sizing: border-box;
          border: 2px solid #ccc;
          border-radius: 4px;
          background-color: #f8f8f8;
          resize: none;
}

select样式

select {
          width: 100%;
          padding: 16px 20px;
          border: none;
          border-radius: 4px;
          background-color: #f1f1f1;
}

按钮样式

input[type=button], input[type=submit], input[type=reset] {
          background-color: #4CAF50;
          border: none;
          color: white;
          padding: 16px 32px;
          text-decoration: none;
          margin: 4px 2px;
          cursor: pointer;
}
/* 提示:使用width:100%的全宽度按钮 */

响应表单

调整浏览器窗口的大小以查看效果。当屏幕宽度小于600px时，使两列堆叠在一起，而不是彼此相邻。

高级：以下示例使用媒体查询来创建响应式表单。您将在后面的章节中了解更多相关信息。

@media screen and (max-width: 600px) {
     .col-25, .col-75, input[type=submit] {
            width: 100%;
            margin-top: 0;
     }
}

链接: https://www.fly63.com/course/4_219