前端用户ID输入框获取焦点的时候变成浅蓝色,失去焦点的时候边框变成原来的黑色
时间: 2024-02-23 21:00:38 浏览: 22
要实现当前端用户ID输入框获取焦点时边框变成浅蓝色,失去焦点时边框变成原来的黑色,可以使用CSS样式来设置输入框的边框颜色属性。例如:
```css
input:focus {
border-color: lightblue;
}
input {
border-color: black;
}
```
将该样式应用到对应的输入框元素上,例如:
```html
<input type="text" name="name" id="name" style="border-color: black;"></input>
```
通过:focus伪类选择器,可以实现当输入框获取焦点的时候,将边框颜色设置为浅蓝色。当输入框失去焦点的时候,边框颜色会变回原来的黑色。
或者将样式定义在CSS文件中,然后通过class或id来应用到对应的输入框元素上,例如:
```css
input:focus {
border-color: lightblue;
}
.input-box {
border-color: black;
}
```
```html
<input type="text" name="name" id="name" class="input-box"></input>
```
这样就可以实现输入框获取焦点时边框变成浅蓝色,失去焦点时边框变成原来的黑色。
相关问题
前端用户ID输入框获取焦点的时候变成浅蓝色,失去焦点的时候边框变成原来的黑色的代码
以下是HTML和CSS代码,可以实现输入框获取焦点时边框变成浅蓝色,失去焦点时边框变成原来的黑色:
```html
<input type="text" name="user-id" id="user-id" class="input-box" placeholder="请输入用户ID">
```
```css
.input-box {
border: 2px solid black;
padding: 8px;
}
.input-box:focus {
outline: none;
border: 2px solid lightblue;
}
```
在这个例子中,我们首先定义了一个类名为 ".input-box" 的样式,该样式设置了输入框的边框为2px宽的黑色边框,并设置了8px的内边距(padding)。然后,使用:focus伪类选择器来定义输入框获取焦点时的样式,该样式将输入框的边框颜色设置为浅蓝色,同时通过outline:none;来去掉输入框获取焦点时的默认外边框。
通过这种方式,我们可以实现输入框获取焦点时边框变成浅蓝色,失去焦点时边框变成原来的黑色。
jQuery所有字体均是红色,用户id输入框获取焦点的时候边框变成浅蓝色,失去焦点时边框变成原来的灰色或黑色,密码输入框也是这样,点击登录按钮完成form表单验证,用户id不能为空,只能是字母,密码纯数字6位否则不跳转,校验通过跳转到show.html展示用户信息,登录按钮旁是重置按钮
好的,我明白你的问题了。你需要实现一个功能,其中包括以下几个要求:
1. jQuery所有字体均是红色
2. 用户ID输入框获取焦点的时候边框变成浅蓝色,失去焦点时边框变成原来的灰色或黑色,密码输入框也是这样
3. 点击登录按钮完成form表单验证,用户ID不能为空,只能是字母,密码纯数字6位否则不跳转
4. 校验通过跳转到show.html展示用户信息
5. 登录按钮旁是重置按钮
下面是实现该功能的代码,你可以参考一下:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
font-size: 16px;
color: red;
}
input[type="text"], input[type="password"] {
border: 1px solid gray;
outline: none;
padding: 5px;
}
input[type="text"]:focus, input[type="password"]:focus {
border-color: lightblue;
}
button {
padding: 10px;
background-color: green;
color: white;
border: none;
cursor: pointer;
}
button[type="reset"] {
margin-left: 10px;
}
.error {
color: red;
}
</style>
</head>
<body>
<h1>Login</h1>
<form id="login-form" action="show.html">
<div>
<label for="user-id">User ID:</label>
<input type="text" id="user-id" name="user-id" required pattern="[a-zA-Z]+">
<span class="error" id="user-id-error"></span>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required pattern="[0-9]{6}">
<span class="error" id="password-error"></span>
</div>
<div>
<button type="submit">Login</button>
<button type="reset">Reset</button>
</div>
</form>
<script>
$(function() {
$('body').css('color', 'red');
$('input[type="text"], input[type="password"]').on('focus', function() {
$(this).css('border-color', 'lightblue');
}).on('blur', function() {
$(this).css('border-color', 'gray');
});
$('#login-form').on('submit', function(event) {
var userId = $('#user-id').val();
var password = $('#password').val();
var userIdRegex = /^[a-zA-Z]+$/;
var passwordRegex = /^[0-9]{6}$/;
var hasError = false;
if (!userIdRegex.test(userId)) {
$('#user-id-error').text('User ID can only contain letters');
hasError = true;
} else {
$('#user-id-error').text('');
}
if (!passwordRegex.test(password)) {
$('#password-error').text('Password must be 6 digits');
hasError = true;
} else {
$('#password-error').text('');
}
if (hasError) {
event.preventDefault();
}
});
});
</script>
</body>
</html>
```
这段代码中,我们首先引入了 jQuery 库,并设置了页面的基本样式。然后,我们为输入框添加了获取和失去焦点的样式,并设置了表单的校验规则。最后,我们使用 jQuery 为登录按钮和重置按钮添加了事件处理函数,完成了表单的提交和重置操作。
希望这个回答能够帮助到你!