上一节:
下一节:

  CSS 表单

  • 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;
          }
        }
    尝试一下
上一节:
下一节: