Logo

html鼠标点击时的样式,鼠标点击输入框时高亮显示边框颜色【jquery和css实现】…

photo

2022年04月30日

这里解释如何突出显示表单字段的边框颜色、背景颜色等,如焦点上的HTML输入文本框、输入密码、选择下拉菜单和文本区域,并在失去焦点时使用jquery和css使它们正常。

1467d8c949506a63bc690ce9338ddd3e.gif

突出显示焦点上的边框颜色

突出显示焦点上的边框颜色

下面的代码片段解释了如何使用jquery和css突出显示表单字段,如HTML输入文本框、输入密码、选择下拉列表和文本区域。

.focus{border: 1px solid #FFB000;outline: none;}

.blur{border: 1px solid #CCCCCC;outline: none;}

$(function () {

$(“input[type=text], input[type=password], textarea, select”).each(function () {

$(this).addClass(“blur”);

$(this).focus(function () {

$(this).removeClass(“blur”).addClass(“focus”);

});

$(this).blur(function () {

$(this).removeClass(“focus”).addClass(“blur”);

});

});

});

TextBox:

Password:

Textarea:

Select:

Please select

Female

Male

说明:

上面在head部分的样式标签中创建了两个css类。

–focus (将在HTML控件具有焦点时应用)

–blur (将在HTML控件失去焦点时应用)

接下来,将在页面的加载事件中对所有表单字段 (input[type=text],input[type=password],textarea,select) 执行循环。在循环中,将焦点和模糊事件附加到HTML表单字段。在这些事件中,简单地添加和移除焦点和模糊CSS类,以便当控件聚焦时突出显示它,当它失去焦点时,它应该恢复正常。

上面的CSS只更改边框的颜色。但您可以根据需要修改它,只需编辑这两个CSS类即可。

1467d8c949506a63bc690ce9338ddd3e.gif

突出显示焦点上的边框颜色

相关文章

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
所有附件
该文章没有附件.
本文为原创文章,请注意保留出处!

留言板

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

C#/VB.NET 合并PDF页面 2022年04月30日

本文以C#及vb.net代码为例介绍如何来实现合并PDF页面内容。本文中的合并并非将两个文档简单合并...C#/VB.NET合并PDF页面

热门文章

ffmpeg 生成水印 1:先要配置ffmpeg的滤镜:参考:https://www.jianshu.com/p/9d24...ffmpeg生成水印 作者:Pastore Antonio
1533 浏览量
Navicat Premium 12.0.22 安装与破解 一、安装  NavicatPremium12.0.22的下载链接:https://pan.ba...NavicatPremium12.0.22安装与破解 作者:Pastore Antonio
1474 浏览量
谷歌浏览器扩展程序报错 The message port closed before a response was received. 问题描述ChromeExtension报错:Uncheckedruntime.lastEr...谷歌浏览器扩展程序报错Themessageportclosedbeforearesponsewasreceived. 作者:Pastore Antonio
1469 浏览量
Spring Aop AfterReturning接收返回值 包结构:Spring.xmlUserDao.java测试类Main方法...SpringAopAfterReturning接收返回值 作者:Pastore Antonio
1464 浏览量
CentOS 系统yum安装出现“未找到匹配的参数”、“没有可用软件包”错误的解决办法 帮助文档链接:https://www.opsit.cn/4896.html今天安装fwknop时,...CentOS系统yum安装出现“未找到匹配的参数”、“没有可用软件包”错误的解决办法 作者:Pastore Antonio
1459 浏览量