参考手册
CSS 表单
CSS 文本域样式
返回 CSS 表单

CSS 输入框样式

填充输入框

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

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

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. input[type=text] {
  6.   width: 100%;
  7.   padding: 12px 20px;
  8.   margin: 8px 0;
  9.   box-sizing: border-box;
  10. }
  11. </style>
  12. </head>
  13. <body>
  15. <p>已填充的文本字段：</p>
  17. <form>
  18.   <label for="fname">姓氏</label>
  19.   <input type="text" id="fname" name="fname">
  20.   <label for="lname">名字</label>
  21.   <input type="text" id="lname" name="lname">
  22. </form>
  24. </body>
  25. </html>
运行一下

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

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

带边框的输入框

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

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. input[type=text] {
  6.   width: 100%;
  7.   padding: 12px 20px;
  8.   margin: 8px 0;
  9.   box-sizing: border-box;
  10.   border: 2px solid red;
  11.   border-radius: 4px;
  12. }
  13. </style>
  14. </head>
  15. <body>
  17. <p>带边框的文本字段：</p>
  19. <form>
  20.   <label for="fname">姓氏</label>
  21.   <input type="text" id="fname" name="fname">
  22.   <label for="lname">名字</label>
  23.   <input type="text" id="lname" name="lname">
  24. </form>
  26. </body>
  27. </html>
运行一下

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

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. input[type=text] {
  6.   width: 100%;
  7.   padding: 12px 20px;
  8.   margin: 8px 0;
  9.   box-sizing: border-box;
  10.   border: none;
  11.   border-bottom: 2px solid red;
  12. }
  13. </style>
  14. </head>
  15. <body>
  17. <p>只有下边框的文本字段：</p>
  19. <form>
  20.   <label for="fname">姓氏</label>
  21.   <input type="text" id="fname" name="fname">
  22.   <label for="lname">名字</label>
  23.   <input type="text" id="lname" name="lname">
  24. </form>
  26. </body>
  27. </html>
运行一下

彩色的输入框

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

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. input[type=text] {
  6.   width: 100%;
  7.   padding: 12px 20px;
  8.   margin: 8px 0;
  9.   box-sizing: border-box;
  10.   border: none;
  11.   background-color: #3CBC8D;
  12.   color: white;
  13. }
  14. </style>
  15. </head>
  16. <body>
  18. <p>有颜色的文本字段：</p>
  20. <form>
  21.   <label for="fname">姓氏</label>
  22.   <input type="text" id="fname" name="fname" value="埃隆">
  23.   <label for="lname">名字</label>
  24.   <input type="text" id="lname" name="lname" value="马斯克">
  25. </form>
  27. </body>
  28. </html>
运行一下

获得焦点的输入框

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

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

请在文本框中点击：

请在文本框中点击：

实例 1
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. input[type=text] {
  6.   width: 100%;
  7.   padding: 12px 20px;
  8.   margin: 8px 0;
  9.   box-sizing: border-box;
  10.   border: 1px solid #555;
  11.   outline: none;
  12. }
  14. input[type=text]:focus {
  15.   background-color: lightblue;
  16. }
  17. </style>
  18. </head>
  19. <body>
  21. <p>在本例中，我们使用：焦点选择器在文本字段聚焦（单击）时向其添加背景色：</p>
  23. <form>
  24.   <label for="fname">姓氏</label>
  25.   <input type="text" id="fname" name="fname" value="埃隆">
  26.   <label for="lname">名称</label>
  27.   <input type="text" id="lname" name="lname" value="马斯克">
  28. </form>
  30. </body>
  31. </html>
运行一下
实例2
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. input[type=text] {
  6.   width: 100%;
  7.   padding: 12px 20px;
  8.   margin: 8px 0;
  9.   box-sizing: border-box;
  10.   border: 3px solid #ccc;
  11.   -webkit-transition: 0.5s;
  12.   transition: 0.5s;
  13.   outline: none;
  14. }
  16. input[type=text]:focus {
  17.   border: 3px solid #555;
  18. }
  19. </style>
  20. </head>
  21. <body>
  23. <p>在本例中，我们使用：focus选择器在文本字段聚焦（单击）时向其添加黑色边框颜色：</p>
  24. <p>请注意，我们添加了CSS transition属性来设置边框颜色的动画（更改焦点上的颜色需要0.5秒）。</p>
  26. <form>
  27.   <label for="fname">姓氏</label>
  28.   <input type="text" id="fname" name="fname" value="埃隆">
  29.   <label for="lname">名字</label>
  30.   <input type="text" id="lname" name="lname" value="马斯克">
  31. </form>
  33. </body>
  34. </html>
运行一下

带有图标/图像的输入框

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

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. input[type=text] {
  6.   width: 100%;
  7.   box-sizing: border-box;
  8.   border: 2px solid #ccc;
  9.   border-radius: 4px;
  10.   font-size: 16px;
  11.   background-color: white;
  12.   background-image: url('/images/searchicon.png');
  13.   background-position: 10px 10px;
  14.   background-repeat: no-repeat;
  15.   padding: 12px 20px 12px 40px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  21. <p>带图标的输入框：</p>
  23. <form>
  24.   <input type="text" name="search" placeholder="Search..">
  25. </form>
  27. </body>
  28. </html>
运行一下

带动画效果的搜索输入框

在本例中，我们使用 CSS transition 属性为搜索输入框获得焦点时的宽度变化设置动画。

稍后，您可以访问本站的 CSS 过渡 一章中学到更多有关 transition 属性的知识。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. input[type=text] {
  6.   width: 130px;
  7.   box-sizing: border-box;
  8.   border: 2px solid #ccc;
  9.   border-radius: 4px;
  10.   font-size: 16px;
  11.   background-color: white;
  12.   background-image: url('/images/searchicon.png');
  13.   background-position: 10px 10px;
  14.   background-repeat: no-repeat;
  15.   padding: 12px 20px 12px 40px;
  16.   transition: width 0.4s ease-in-out;
  17. }
  19. input[type=text]:focus {
  20.   width: 100%;
  21. }
  22. </style>
  23. </head>
  24. <body>
  26. <p>带动画效果的输入框:</p>
  28. <form>
  29.   <input type="text" name="search" placeholder="Search..">
  30. </form>
  32. </body>
  33. </html>
运行一下
CSS 文本域样式

分类导航