网站建设(河南省滑县网站建设服务中心) - 上往建站

网站建设(河南省滑县网站建设服务中心) - 上往建站

获得焦点的输入框

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

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

实例 1

input[type=text]:focus {

  background-color: lightblue;

}

请在文本框中点击：

 亲自试一试

实例 2

input[type=text]:focus {

  border: 3px solid #555;

}

请在文本框中点击：

 亲自试一试

带有图标/图像的输入框

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

Search..

实例

input[type=text] {

  background-color: white;

  background-image: url('searchicon.png');

  background-position: 10px 10px; 

  background-repeat: no-repeat;

  padding-left: 40px;

}

亲自试一试

带动画效果的搜索输入框

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

Search..

实例

input[type=text] {

  transition: width 0.4s ease-in-out;

}

input[type=text]:focus {

  width: 100%;

}

亲自试一试

设置文本域的样式

提示：使用 resize 属性可防止对 textareas 调整大小（禁用右下角的“抓取器”）：

Some text...

实例

textarea {

  width: 100%;

  height: 150px;

  padding: 12px 20px;

  box-sizing: border-box;

  border: 2px solid #ccc;

  border-radius: 4px;

  background-color: #f8f8f8;

  resize: none;

}

亲自试一试

设置选择菜单的样式

Australia

实例

select {

  width: 100%;

  padding: 16px 20px;

  border: none;

  border-radius: 4px;

  background-color: #f1f1f1;

}

亲自试一试

设置输入按钮的样式

实例

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

亲自试一试

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

响应式菜单

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

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

网站建设(河南省滑县网站建设服务中心) - 上往建站