表单输入焦点边框半径和输入提交焦点
创始人
2024-12-09 18:30:45
0

要设置表单输入的焦点边框半径和输入提交的焦点,可以使用CSS来实现。以下是一个示例代码:

HTML:



CSS:

input[type="text"], input[type="email"] {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

input[type="submit"] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}

input[type="text"]:focus, input[type="email"]:focus {
  border: 1px solid #4CAF50;
  outline: none;
}

input[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 5px #4CAF50;
}

在上述示例中,我们通过border-radius属性设置了输入框的边框半径为5px,padding属性用于设置输入框的内边距。

使用input[type="text"]:focusinput[type="email"]:focus选择器,我们可以定义输入框在获得焦点时的样式,这里我们将边框颜色改为绿色。

对于提交按钮,我们使用input[type="submit"]选择器来设置样式,包括背景颜色、边框、文字颜色等。

使用:focus伪类选择器,我们定义了当提交按钮获得焦点时的样式,这里我们添加了一个绿色的阴影效果。

通过将以上代码添加到HTML文件的