文爱 聊天 超赞！只需几步，打造高颜值的CSS表单！（附代码）

发布日期：2025-03-18 04:07    点击次数：127

你好文爱 聊天，我是云桃桃。

一个但愿匡助更多一又友快速初学 WEB 前端的关节媛。

序论

今天，咱们来用 CSS 好意思化一下表单位素，它实在可使用绝大大批 CSS 属性进行款式缠绵。

OK文爱 聊天，那来一齐望望吧。

表单的 CSS

好意思化前。

图片文爱 聊天

好意思化后，是不是漂亮多了。

图片

还不错加入小动画。

韩国伦理电影

图片

因为没太多的生分属性，无需过多讲解。即使有生分的在防御里已标注，那咱们一齐来看下代码，学习下吧~

CSS：

     * {        font-family: '微软雅黑';        margin: 0;        padding: 0;        box-sizing: border-box;      }      /* 请示文本的神气，也便是未输入之前的placeholder属性的神气 */      ::placeholder {        color: #986ef4; /* 这里是为了浅近看出来建造为紫色，频繁为黑灰色，浅灰色一类 */      }      div[class^='box'] {        width: 800px;        margin: 20px 0px 10px 20px;      }      h4 {        line-height: 40px;      }      .box1-element input，      .box1-element select，      .box1-element textarea {        width: 800px; /* 建造宽度 */      }      .box1 input，      .box1 select，      .box1 textarea {        height: 30px; /* 建造高度 */        padding: 0px 15px; /* 建造内边距 */        margin-bottom: 18px; /* 建造外边距 */        border: 1px #33d182 solid;        border-radius: 3px; /* 建造边框圆角 */        font-size: 14px; /* 建造字体大小 */        color: #e66ba0; /* 建造字体神气为腮红粉色 */        line-height: 30px; /* 建造行高 */        background: rgba(51， 209， 130， 0.1); /* 建造布景神气为浅绿色 */      }      .box1 input:focus，      .box1 textarea:focus {        outline: 2px #33d182 solid; /* 光标聚焦input的技艺，改革输入框的外边为绿色 */        background: rgba(51， 209， 130， 0.3); /* 建造布景神气为浅绿色 */      }      .box1 textarea {        height: 180px; /* 建造高度 */        resize: none; /* 在长文本框的右下角，辞谢让用户拖动改革大小 */      }      .box1 select option {        line-height: 30px; /* 建造行高 */      }      .box2 input {      }      /* 建造按钮的款式 */      .box3 input[type='button']，      .box3 input[type='submit']，      .box3 input[type='reset'] {        background: #33d182;        font-size: 16px;        letter-spacing: 2px; /* 建造字间距 */        border: none;        color: #fff;        width: 200px;        line-height: 40px;        margin-right: 15px;        cursor: pointer; /* 鼠标悬停时，显现小手 */      }      .box2 .with-user-icon {        padding: 0px 30px;        background: url(img/heart-fill.png) no-repeat 4px center;      }      .box2 input[type='text'] {        width: 100%;        line-height: 30px;        transition: width 0.4s ease-in-out; /* 建造动画遵循平滑一些 */      }      .box2 input.with-animation {        width: 200px; /* 建造运行宽度 200px */      }      .box2 input[type='text']:focus {        width: 100%; /* 聚焦的技艺，将input宽度从200像素到百分之百的800像素 */      }      .box1-1-element input，      .box1-1-element select，      .box1-1-element textarea {        width: 720px; /* 建造宽度 */      }      .box1-1 label {        display: block;        float: left;        width: 80px;        font-size: 14px;        line-height: 30px;        text-align: right;      }

HTML：

 <div class="box1 box1-element">      <h4>表单基础项款式修改</h4>      <input type="text" placeholder="请输入用户名" />      <input type="password" name="pwd" id="" placeholder="请输入密码" />      <input type="number" name="age" id="" placeholder="请输入年级" />      <select name="city" id="">        <option value="">请选拔城市</option>        <option value="">北京</option>        <option value="">上海</option>        <option value="">广州</option>      </select>      <textarea name="" id=""> 你好啊！！！</textarea>    </div>    <div class="box2">      <h4>带图场地输入框：</h4>      <input class="with-user-icon" type="text" placeholder="请输入用户名" />      <h4>带动画的输入框：</h4>      <input class="with-animation" type="text" placeholder="请输入用户名" />    </div>    <div class="box1 box1-1 box1-1-element">      <h4>带左侧翰墨的输入框:</h4>      <div>        <label for="user">用户名：</label>        <input name="user" type="text" placeholder="请输入用户名" />      </div>      <div>        <label for="pwd">密码：</label>        <input name="pwd" type="password" placeholder="请输入密码" />      </div>      <div>        <label for="age">年级：</label>        <input name="age" type="number" placeholder="请输入年级" />      </div>      <div>        <label for="city">城市：</label>        <select name="city">          <option value="">请选拔城市</option>          <option value="">北京</option>          <option value="">上海</option>          <option value="">广州</option>        </select>      </div>    </div>    <div class="box3">      <h4>表单按钮款式修改</h4>      <input type="reset" value="重置" />      <input type="button" value="按钮" />      <input type="submit" value="提交" />    </div>

OK，本文完。

本站仅提供存储功绩，整个实质均由用户发布，如发现存害或侵权实质，请点击举报。