用H5+CSS3实现自定义表单控件

前端

2023-12-22 20:51:22

前端页面中使用表单控件是不可避免的，为了给用户提供良好的体验，定制表单控件往往是非常必要的。

为什么这么说呢？我们平常用的text和button，如果仅仅用CSS去改变其样式，只能在有focus的时候改变边框。

如下图所示，Chrome文本框在hover的时候没有状态，只有focus的时候，才会有状态提示。
[图片：Chrome文本框]

IE文本框从来都是特例，它的样式一律用!important锁死了，可修改性较差。
[图片：IE文本框]

如何用H5和CSS3实现自定义表单控件呢？

接下来，我们通过一个简单的例子来说明如何实现自定义表单控件。

首先，我们创建一个简单的HTML表单，包含一个文本输入框和一个按钮。

<form>
  <label for="username">Username:</label>
  <input type="text" id="username">

  <label for="password">Password:</label>
  <input type="password" id="password">

  <button type="submit">Login</button>
</form>

然后，我们使用CSS3来对表单控件进行样式设计。

/* 文本框样式 */
input[type="text"], input[type="password"] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 按钮样式 */
button[type="submit"] {
  width: 100px;
  padding: 10px;
  background-color: #428bca;
  border: 1px solid #357ebd;
  border-radius: 5px;
  color: #fff;
}

/* hover样式 */
input[type="text"]:hover, input[type="password"]:hover {
  border-color: #888;
}

button[type="submit"]:hover {
  background-color: #357ebd;
}

/* focus样式 */
input[type="text"]:focus, input[type="password"]:focus {
  border-color: #000;
}

button[type="submit"]:focus {
  background-color: #286090;
}