加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > css3基础

CSS 表单 详解

css3基础 2022-05-23 12:05:27小码哥的IT人生shichen

CSS 表单

通过使用 CSS，可以极大地改善 HTML 表单的外观：

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
input[type=submit]:hover {
  background-color: #45a049;
}
div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>
<h1>Using CSS to style an HTML Form</h1>
<div>
  <form action="/demo/demo_form.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">China</option>
      <option value="usa">USA</option>
    </select>
    <input type="submit" value="Submit">
  </form>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

设置输入字段的样式

使用 width 属性来确定输入字段的宽度：

示例代码：

input {
  width: 100%;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  width: 100%;
}
</style>
</head>
<body>
<p>全宽的输入字段：</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

上例适用于所有 <input> 元素。如果只想设置特定输入类型的样式，则可以使用属性选择器：

  1. input[type=text] - 将仅选择文本字段
  2. input[type=password] - 将仅选择密码字段
  3. input[type=number] - 将仅选择数字字段
  4. 等等...

填充输入框

使用 padding 属性在文本字段内添加空间。

提示：若有很多输入，那么您可能还需要添加外边距，以便在它们之外添加更多空间：

示例代码：

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

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
</style>
</head>
<body>
<p>已填充的文本字段：</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请注意，我们已将 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距（填充）和最终的边框。

请在在我们的 CSS Box Sizing 这一章中学习有关 box-sizing 属性的更多知识。

带边框的输入框

请使用 border 属性更改边框的粗细和颜色，并使用 border-radius 属性添加圆角：

示例代码：

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid red;
  border-radius: 4px;
}
</style>
</head>
<body>
<p>带边框的文本字段：</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

如果仅需要下边框，请使用 border-bottom 属性：

示例代码：

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid red;
}
</style>
</head>
<body>
<p>只有下边框的文本字段：</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

彩色的输入框

请使用 background-color 属性为输入添加背景色，并使用 color 属性更改文本颜色：

示例代码：

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #3CBC8D;
  color: white;
}
</style>
</head>
<body>
<p>有颜色的文本字段：</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="Bill">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Gates">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

获得焦点的输入框

默认情况下，某些浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。您可以通过向输入添加 outline: none; 来消除此行为。

使用 :focus 选择器可以在输入字段获得焦点时为其设置样式：

实例 1

input[type=text]:focus {
  background-color: lightblue;
}

请在文本框中点击：

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #555;
  outline: none;
}
input[type=text]:focus {
  background-color: lightblue;
}
</style>
</head>
<body>
<p>在本例中，我们使用了 :focus 选择器，在文本字段获得焦点时（被点击）为其添加背景色：</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="Bill">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Gates">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

实例 2

input[type=text]:focus {
  border: 3px solid #555;
}

请在文本框中点击：

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}
input[type=text]:focus {
  border: 3px solid #555;
}
</style>
</head>
<body>
<p>在本例中，我们使用了 :focus 选择器，在文本字段获得焦点时（被点击）为其添加黑色边框：</p>
<p>请注意，我们已添加 CSS 过渡属性以设置边框颜色的动画（改变颜色需 0.5 秒）。</p>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="Bill">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Gates">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

带有图标/图像的输入框

如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置。还要注意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间：

示例代码：

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

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>
<p>带图标的输入框：</p>
<form>
  <input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

带动画效果的搜索输入框

在本例中，我们使用 CSS transition 属性为搜索输入框获得焦点时的宽度变化设置动画。稍后，您将在我们的 CSS 过渡 一章中学到更多有关 transition 属性的知识。

示例代码：

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}
</style>
</head>
<body>
<p>有动画效果的输入字段：</p>
<form>
  <input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

设置文本域的样式

提示：使用 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;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}
</style>
</head>
<body>
<p><b>提示：</b>使用 resize 属性可防止调整 textareas 的大小（禁用右下角的“抓取器”）：</p>
<form>
  <textarea>Some text...

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

设置选择菜单的样式

示例代码：

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

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
</style>
</head>
<body>
<p>有样式的选择菜单：</p>
<form>
  <select id="country" name="country">
  <option value="au">Australia</option>
  <option value="ca">Canada</option>
  <option value="usa">USA</option>
  </select>
</form>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

设置输入按钮的样式

示例代码：

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%，以实现全宽按钮 */

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h1>有样式的输入按钮</h1>
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

有关如何使用 CSS 设置按钮样式的更多知识，请学习我们的 CSS 按钮 教程。

响应式菜单

请调整 TIY 编辑器窗口的大小来查看效果。当屏幕的宽度小于 600 像素时，使两列上下堆叠而不是左右堆叠。

高级：接下来的例子使用 媒体查询 来创建响应式表单。在下一章中，您将学到更多相关知识。

查看响应式菜单

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024