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;
              }
            }
    尝试一下