当鼠标移到input上时，鼠标变为不可输入的状态【红色警告】

最新推荐文章于 2023-07-17 17:32:37 发布

Java小技巧

最新推荐文章于 2023-07-17 17:32:37 发布

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sun2012930/article/details/77285598

本文介绍了如何使用HTML中的style属性来改变禁用表单元素的鼠标指针样式，通过设置cursor为not-allowed，可以直观地告诉用户该表单元素当前处于不可编辑状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址：http://blog.youkuaiyun.com/zl544434558/article/details/21399059

表单不可输入一般用disabled或display=none.但是这样页面并没有变化，所以如果想让鼠标变成红色的警告。就可以用如下属性：

[html]view plaincopy 
   
print?
 style="cursor: not-allowed" disabled  

示例代码如下：

[html]view plaincopy 
   
print?
 <input  type="text"  style="cursor:not-allowed" disabled  />  

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Java小技巧

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

【专家独推】全网最全Matlab常用函数（包括按首字母进行分类）

左手の明天的博客

03-30

3万+

目录 1、求组合数 2、求阶乘 3、求全排列 4、求指数 5、求行列式 6、求矩阵的转置 7、求向量的指数 8、求自然对数 9、求矩阵的逆矩阵 10、多项式的乘法运算 11、多项式除法 12、求一个向量的最大值 13、求矩阵的最大值和最小值 14、求和与求积 15、平均值、标准方差 16、相关系数 17、排序 18、多项式的求导 19、多项式的求值 20、常用的基本数学函数 21、常用的三角函数 22、适用于向量的常用函数 23、MATLAB的永久常数 24、

Unity-微信小程序系统化配置教程(不含Mac) 手把手带你用Unity打包出属于你自己的小程序

最新发布

归里的博客

12-04

2315

一份Unity-To-微信小程序的系统化配置教程，手把手教学带你用Unity打包出属于你自己的微信小程序

参与评论您还未登录，请先登录后发表或查看评论

CSS实现当鼠标移到input上时鼠标变为不可输入的状态

09-25

用disabled或display=none 可实现表单不可输入，但是这样页面并没有变化，如果想让鼠标变成红色的警告可以通过下面的方法来实现

输入框红色警告

weixin_58425109的博客

01-13

244

html 输入框红色警告。

input设置disable鼠标移上去怎么出现禁止的红色图标

qq_37672347的博客

07-05

7284

如何修改input disabled时默认样式

Firefox下el-input出现红框

cfy1030349388的博客

07-13

680

input框在火狐浏览器中边红

VUE-鼠标移入到目标区域变成禁用模样

weixin_45954050的博客

07-17

899

我们只需要在这个元素上添加【cursor：no-drop】就可以实现。这个需求是平常开发中常用的一个样式。

Python3 PyQt5 窗口(国际化/QMainWindow/QWidget/QDialog)

Luzhuo 的博客

02-24

9068

Python3 PyQt5 窗口(国际化/QMainWindow/QWidget/QDialog) 本文由 Luzhuo 编写,转发请保留该信息. 原文: http://blog.youkuaiyun.com/rozol/article/details/68938984 PyQt5基本介绍见: PyQt5 Qt Designer (Qt设计师) 简介窗口主要分为: QMainWindow(主窗口) ...

【CSS】鼠标移入显示禁用图标

SZnAl的博客

05-26

2038

使用elementUI的 Dropdown - 下拉菜单，某些按钮不可点击时，可以使用以下属性为鼠标添加禁用图标。

input框判断不为空，红体字提示信息去除，手动删除，点击取消按钮后表单中的字段内容自动清除

W_a_n_g_X_的博客

07-01

586

这块是新增页面的input框验证的信息： var myEditValidate; //页面加载完，自动执行定义js代码 $(document).ready(function () { form = layui.form; //判断不为空 myEditValidate = $("#form-program-add").validate({ rules: { programName: { required: true, }, pr

el-input无法输入||自动变成了禁用状态||点击后无法获取焦点

12-03

2025

el-input自动变成了禁用状态 el-input无法输入 vue项目中所有 el-input点击后无法获取焦点突然之间项目所有的input都无法输入，类似禁用状态但不是禁用状态，可以强制获取焦点输入，但无法解决根本问题，网上任何方法都试了没有用最后解决方法，卸载elementui重装更新到最新版本$ npm install element-ui@2.15.7 -S ，重新npm run serve就可以了记录问题 ...

css样式，鼠标移动上去变成禁用、小手等样式。

pipizhou16的博客

08-17

6665

css样式，鼠标移动上去变成禁用、小手等样式。

input标签设置disabled="disabled"属性的效果？

05-14

1263

1.如果不提交表单，设置了disabled属性的input标签的值是不可选取不可编辑状态； eg: <td width="15%" class="mip_form_td_label"><span>库存量：</span> </td> <td class="mip_form_td_con...

非input框的元素禁用样式（鼠标移入出现禁用）

agua001的博客

04-27

645

1、需求：正常来看是文本域的禁用，但是考虑到在文本域中不能随意发挥的布局，所以就使用div盒子去布局，并且达到禁止操作修改的样式,给盒子添加样式 cursor: not-allowed; 或 cursor: no-drop; 加油，打工人！ ...

input属性disabled和readonly的区别（超详细的~~~~）

热门推荐

白小纯的博客

10-16

2万+

1.两种情况的写法，没什么太大的区别，两个属性而已 disabled写法：<input type="text" name="aaa" value="xxx" disabled="true"/> readonly写法： <input type="text" name="bbb" value="xxx" readonly=&

鼠标禁用光标,禁用鼠标样式

weixin_45162984的博客

06-03

3169

鼠标禁用光标,禁用鼠标样式是一个红圈加斜杠的鼠标光标 cursor: not-allowed;

【web】当input的属性设置为disabled=“disabled“时，表单不会提交此input的数据

Shino_jie的博客

06-11

2841

解决办法：1.在设置disabled="disabled"的同时另外设置一个隐藏的input，如： 2.使用readonly代替disabled="disabled" readonly和disabled是用在表单中的两个属性都可以做到使用户不可以更改表单域中的内容。 disabled：对于全部的表单元素都有效，包括select, radio, checkbox, button等。若是一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的全部操做（鼠标点击和键盘输入等）对该输入

html中input文本框鼠标悬停提示文本内容，使用onmouseover属性失效

weixin_46084802的博客

12-16

4093

在input中有disabled属性时，onmouseover便会失效，可以使用readonly代替 <input class="form-control" type="text" disabled="disabled" onmouseover="this.title=this.value"/> <input class="form-control" type="text" readonly onmouseover="this.title=this.value"/> ...

实现输入框鼠标禁止编辑的三种方式

qq_53825610的博客

05-30

1910

3.css实现：pointer-events: none；//禁用鼠标事件鼠标触碰时为正常的箭头显示。2.readonly属性：鼠标触碰时显示为编辑的状态。1.disbled属性：鼠标触碰时显示为禁用状态。

vue中鼠标移入显示input框但是输入汉字时input框消失

05-25

你可以通过v-on指令来监听input框的事件，然后在鼠标移入时显示input框，同时在输入汉字时隐藏input框。下面是一个简单的示例代码： ```html !show">{{ text }} <input v-if="show" ref="input" v-model="text...

当鼠标移到input上时，鼠标变为不可输入的状态 【红色警告】

当鼠标移到input上时，鼠标变为不可输入的状态【红色警告】