要设置表单输入的焦点边框半径和输入提交的焦点,可以使用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"]:focus
和input[type="email"]:focus
选择器,我们可以定义输入框在获得焦点时的样式,这里我们将边框颜色改为绿色。
对于提交按钮,我们使用input[type="submit"]
选择器来设置样式,包括背景颜色、边框、文字颜色等。
使用:focus
伪类选择器,我们定义了当提交按钮获得焦点时的样式,这里我们添加了一个绿色的阴影效果。
通过将以上代码添加到HTML文件的标签中或者将其保存为一个独立的CSS文件并链接到HTML文件中,即可实现表单输入焦点边框半径和输入提交焦点的样式设置。