css input文本框获取焦点

最新推荐文章于 2024-06-21 10:52:04 发布
最新推荐文章于 2024-06-21 10:52:04 发布
阅读量1.3w 收藏 3
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itSeven7/article/details/54340965
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		input , textarea{ 
			outline:none;
		}
		input:focus , textarea:focus{
			border: 1px solid red;
			background: #ddd;
		}
	</style>
</head>
<body>
	<from>
		<input type="username" />
		<input type="pass" />
		<textarea name="" id="" cols="30" rows="10"></textarea>
	</from>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input , textarea{
outline:none;
}
input:focus , textarea:focus{         获取焦点改变颜色
border: 1px solid red;
background: #ddd;
}
</style>
</head>
<body>
<from>
<input type="username" />
<input type="pass" />
<textarea name="" id="" cols="30" rows="10"></textarea>
</from>
</body>
</html>

SevenBig
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
文本框(input)获取焦点(onfocus)时样式改变的示例代码
09-04
本篇文章主要是对文本框(input)获取焦点(onfocus)时样式改变的示例代码进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
纯CSS怎么实现input获取焦点后，父元素边框颜色改变的问题
weixin_44395641的博客
12-23 2737
很????的一个问题只能使用css实现，input获取焦点，改变父元素的颜色； 试了很久都是只能改变input的背景颜色，百度调研了很久，都是说纯CSS实现不了，找到一篇长篇大论的文章，在我以为我快要接近答案的时候，末尾来了一句纯CSS实现不了，用JS实现去了。 心态炸了！！！能用JS，鬼用css啊。 最后还是在MDN找见了解决方法，吹一波，????????。发泄完了，进入正题： :focus-within :focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或该元素的后代元素获得
CSS：输入框获得焦点时调整输入框的大小
最新发布
听海边涛声
06-21 151
CSS：输入框获得焦点时调整输入框的大小
使用css改变input获取焦点时的样式
Yt0601的博客
12-06 1276
使用css改变input获取焦点时的样式
input输入框获取到焦点删除黑色框 css
hello world
01-26 700
.tea-input:focus, .tea-textarea:focus { border-color: #2E95FF; outline: 0; } 上述代码意思是说：获取到焦点后通过outline: 0;删除黑色框，接着设置框颜色border-color: #2E95FF;。
css3 input文本框动画特效
07-24
"css3 input文本框动画特效"是利用CSS3的新特性来增强input元素，特别是针对链接地址和邮箱格式输入框的焦点UI特效。这种特效可以提升用户界面的吸引力，增加用户的交互性，让网站或应用更加现代化和专业。 首先，...
css3 input文本框动画特效特效代码
03-20
使用`background-image`属性和线性渐变（linear-gradient）或径向渐变（radial-gradient），可以在文本框获取焦点时改变其背景颜色，从而创建出动态的效果。 4. **阴影效果（Box Shadow）** `box-shadow`属性能够...
css3 input文本框动画特效.zip
10-14
例如，当文本框获取焦点时，边框可能会逐渐变宽或改变颜色，这可以通过设置`transition: border-color 0.3s ease, border-width 0.3s ease;`来实现。 3. **阴影过渡**：`box-shadow`属性可以创建文本框的阴影效果，...
文本框获取焦点弹出下拉框
03-16
标题“文本框获取焦点弹出下拉框”涉及到的是网页交互设计中的一种常见功能，它通常用于实现输入框（input）的自动补全或者下拉选项选择。在Web开发中，这种功能可以极大提升用户体验，让用户能够快速找到并选择所需...
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
10-21
本文介绍了一个使用jQuery实现的简单实例，即在网页中通过注册文本框获取焦点时清空提示，失去焦点时如果没有输入，则重新显示提示信息的功能。在用户注册过程中，这常常被用来提示用户输入必须的信息，如账号、密码...
jQuery+css3输入框焦点事件动画特效
06-10
几款简单又好看的jQuery+css3输入框焦点事件动画特效，鼠标点击输入框获取焦点，里面的图标动画展示效果。 调用方法：1、在输入框中加上data-animation="slide"（动画效果，slide可以是其他的，具体参照textbox的css） 2、在输入框中加上data-label="slide"（用于输入框左侧文本显示，slide可以是其他任意自定义的文本） 3、在初始化的js中加上$('input').ftext();
去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景
01-19
去掉chrome(谷歌)浏览器默认的input、textarea的边框(border)和背景(background) 及chrome下不可更改textarea大小 1、使用Chrome的都知道，当鼠标焦点在input、textarea这些元素上时，Chrome默认的会给它们加上黄色的边框，我以前一直以为这是chrome的特性，没法去掉，原来是css的效果，outline这个属性。 你可以用下面的css代码去掉所有元素的边框： *:focus {outline: none;} 用下面的代码去掉你要去掉的元素的边框： .nohighlight:focus { outline:none; }
css input聚焦时样式
xinbear的博客
03-22 3837
.input { background: #B1B1B1; } .input:focus { background: #FF7B00; }
HTML CSS 取消输入框 input 在获取焦点时的外边框 修饰
YDOOK
08-20 1870
使用方法 ：添加定义属性 style="outline:none;"
html css输入框获得焦点、失去焦点效果
睡觉不打呼噜的博客
02-26 3256
html css输入框获得焦点、失去焦点效果
css3 ----input focus的发光，缩放 效果
我的地盘
07-03 3282
chrome下input focus默认有个黄色的光影，如果不想要的话 可以在css样式中 添加一下       input：focus{          outline:none;      }   就可以去掉了！    我的样式代码：     input{        border-radius:6px;        border:
input 获取焦点后样式的修改
tigerwxm630的博客
12-13 674
1.没有获取焦点时样子。
关于input框入焦和失焦，纯css改变样式
weixin_33811961的博客
06-07 2248
在工作项目中，是用到input框焦距和失焦时，显示输入的单位。用js方法很简单，但是偶然想到是否可以用纯css来实现？经过实验是可以实现的。HMTL: <div class="input_money "> <em class="hideEm">￥</em> <input type="numb...
表单数据验证 设计网页如下图所示，要求实现 在文本框失去焦点时，进行用户名、密码、确认密码、姓名数据验证，输入错误，在右侧显示警告信息。 只有所有验证通过时才能提交表单.
05-20
好的，这个可以使用JavaScript来实现，具体实现步骤如下： 1. 给每个文本框添加失去焦点事件监听器，当焦点离开文本框时触发验证函数。 2. 编写验证函数，根据不同的文本框进行不同的验证，如用户名长度、密码强度、确认密码等。 3. 如果验证不通过，修改右侧提示信息的内容和样式。 4. 如果所有验证通过，允许提交表单。 下面是示例代码，你可以根据自己的需求进行修改和优化： HTML代码： ``` <form id="myForm"> <div> <label for="username">用户名：</label> <input type="text" id="username" name="username"> <span class="error" id="usernameError"></span> </div> <div> <label for="password">密码：</label> <input type="password" id="password" name="password"> <span class="error" id="passwordError"></span> </div> <div> <label for="confirmPassword">确认密码：</label> <input type="password" id="confirmPassword" name="confirmPassword"> <span class="error" id="confirmPasswordError"></span> </div> <div> <label for="name">姓名：</label> <input type="text" id="name" name="name"> <span class="error" id="nameError"></span> </div> <button type="submit" id="submitBtn">提交</button> </form> ``` JavaScript代码： ``` // 获取表单元素和错误提示元素 const form = document.getElementById('myForm'); const username = document.getElementById('username'); const password = document.getElementById('password'); const confirmPassword = document.getElementById('confirmPassword'); const name = document.getElementById('name'); const usernameError = document.getElementById('usernameError'); const passwordError = document.getElementById('passwordError'); const confirmPasswordError = document.getElementById('confirmPasswordError'); const nameError = document.getElementById('nameError'); // 给每个文本框添加失去焦点事件监听器 username.addEventListener('blur', validateUsername); password.addEventListener('blur', validatePassword); confirmPassword.addEventListener('blur', validateConfirmPassword); name.addEventListener('blur', validateName); // 验证用户名 function validateUsername() { const value = username.value.trim(); if (value.length < 6 || value.length > 20) { usernameError.textContent = '用户名长度必须在6-20之间'; usernameError.classList.add('error-show'); return false; } else { usernameError.textContent = ''; usernameError.classList.remove('error-show'); return true; } } // 验证密码 function validatePassword() { const value = password.value.trim(); if (value.length < 6) { passwordError.textContent = '密码长度不能小于6位'; passwordError.classList.add('error-show'); return false; } else if (!/\d/.test(value) || !/[a-zA-Z]/.test(value)) { passwordError.textContent = '密码必须包含数字和字母'; passwordError.classList.add('error-show'); return false; } else { passwordError.textContent = ''; passwordError.classList.remove('error-show'); return true; } } // 验证确认密码 function validateConfirmPassword() { const value = confirmPassword.value.trim(); if (value !== password.value.trim()) { confirmPasswordError.textContent = '两次输入的密码不一致'; confirmPasswordError.classList.add('error-show'); return false; } else { confirmPasswordError.textContent = ''; confirmPasswordError.classList.remove('error-show'); return true; } } // 验证姓名 function validateName() { const value = name.value.trim(); if (value.length === 0) { nameError.textContent = '请输入姓名'; nameError.classList.add('error-show'); return false; } else { nameError.textContent = ''; nameError.classList.remove('error-show'); return true; } } // 提交表单时验证所有数据是否合法 form.addEventListener('submit', function(e) { e.preventDefault(); if (validateUsername() && validatePassword() && validateConfirmPassword() && validateName()) { alert('表单提交成功！'); } }); ``` CSS代码： ``` .error-show { display: block; color: red; font-size: 12px; margin-top: 5px; } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值