肉渣教程

CSS 表单

上一节 下一节

CSS Forms 表单

在CSS中可以定义很多属性来提升表单元素的视觉形象。在建筑、规划、景观领域有一个梗叫景观三元论，景观三元论的核心就是一切景观规划设计都能归为三点——视觉景观形象、大众行为心理、环境生态绿化。其实这三元对网页表单的设计也是很适合的。表单是一种功能性很强的HTML元素，所以这时，不仅仅要追求视觉美，更要考虑其功能属性，视觉设计结合功能暗示。

表单没啥太特别的CSS属性，基本都介绍过了，下面就说一些典型的案例吧~

设置input元素的样式

关于input元素的选择器倒是花样不少，如下所示：

  • input[type=text] - 只选择type属性为text的input元素
  • input[type=password] - 只选择type属性为password的input元素
  • input[type=number] - 只选择type属性为number的input元素
  • 相似的其他类型

对input元素进行CSS样式设置，案例如下：

input {
    width: 100%;
}

运行一下

设置input元素的内边距

没啥特殊的，设置padding属性就ok啦！（有时不知1个表单输入框，汝就可以设置margin相关的外边距来保持输入框之间有合适的间距）

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

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

运行一下


记得要把box-sizing属性设置成border-box哟，这样才能把内边距、边框粗细也包括在元素的高度和宽度内。

设置input元素的边框样式

依旧如此，没啥特殊的，老样子，设置border属性即可。

input[type=password] {
    border: 1px solid Tomato;
    border-radius: 20px;
}

运行一下


不只如此，还能做得更装逼，只设置下边框，如下： 

input[type=password] {
    border: none;
    border-bottom: 1px solid Tomato;
}

运行一下

设置input元素的色彩样式

使用background-color设置输入框的背景色，使用color设置前景色，即文本颜色。

input[type=password] {
    background-color: Tomato;
    color: White;
}

运行一下

利用伪类设置input的选中状态

使用伪类选择器:focus就可以选择选中状态下的input元素。然后对其进行CSS样式设置就ok啦~

之前上面的示例中，被选中后的元素周围都会有一圈蓝色的光晕，那就是轮廓outline，对于追求极致美的人，定然不喜欢这种效果，那就阉了这种效果，在focus状态的伪类选择器中加上一句outline:none就ok啦~

input[type=text]:focus {
    outline: none;
    background-color: #eef8f8;
    color: #333;
}

运行一下

用小图标来修饰input输入框

曾经有个傻叉，想在搜索输入框的一侧加上个画着放大镜的小图标，于是他利用div作为边框，在内部又搞了两个浮动的容器元素，一个插入图片，一个放入隐藏边框的input输入框。这个傻叉就是月关。其实不用这么麻烦的，利用CSS如下设置就ok啦：

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

运行一下

让搜索输入框动起来

利用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%;
    outline: none;
}

运行一下

设置文本框（textarea元素）的样式

默认情况下textarea元素是可以自动调节元素的宽度和高度，如下示例中，将禁用文本框元素的改变宽高的功能，设置resize:none;即可。

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元素的样式。

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

运行一下

对input按钮进行样式设置

Input元素不愧是百变女郎，还可以作为按钮来用。贫道口水已经流出来了，如下所示吧：

input[type=button], input[type=submit], input[type=reset] {
    background-color: #46acb6;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

运行一下

自适应表单

最后说一下自适应表单，当改变浏览器的窗口大小，表单会做出相应的调整。从而适应不同设备的视窗，在移动端网页开发中，比较实用。（拖拽下方框架网页的右下角，改变一下视窗大小，看看表单的变化吧~ 不过chrome等浏览器可能是无法拖拽框架网页的右下角改变视窗大小，就直接点击最下方的“运行一下”即可测试。）

源码如下：

<!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

input[type=submit] {
    background-color: #46acb6;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #eef8f8;
    padding: 20px;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}
</style>
</head>
<body>

<p><b>自适应表单：</b>试着去改变一下浏览器的大小来看看表单的变化吧~</p>

<div class="container">
  <form action="/action_page.php">
    <div class="row">
      <div class="col-25">
        <label for="fname">First Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">Last Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="country">Country</label>
      </div>
      <div class="col-75">
        <select id="country" name="country">
          <option value="australia">Australia</option>
          <option value="canada">Canada</option>
          <option value="usa">USA</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="subject">Subject</label>
      </div>
      <div class="col-75">
        <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
      </div>
    </div>
    <div class="row">
      <input type="submit" value="Submit">
    </div>
  </form>
</div>

</body>
</html>

运行一下

CSS 表单

上一节 下一节