input的type=‘radio‘设置只读属性颜色为灰色,如何修改

2024-04-23 14:36

本文主要是介绍input的type=‘radio‘设置只读属性颜色为灰色,如何修改,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

1.设置input和label的样式为不可点击。

2.设置input的readonly属性。

3.若想变回可修改,用js实现

4.如何自定义radio的颜色。

5.完整代码


input的单选框有时候需要实现只读,两个办法,一个disabled,一个是readonly.

但disabled设置后,颜色为灰色,如图所示,有时候会不明显。

readonly设置后,还是可以修改。

在网上试了好多种方法都不行,找到一个可以实现。如下

1.设置input和label的样式为不可点击。

<style type="text/css">label{pointer-events: none;}input{pointer-events: none;}
</style>

2.设置input的readonly属性。

<input type="radio" id="aaa"  name="made" value="aaa"   checked="checked" readonly="readonly"/>
<label for="aaa">第一</label>
<input type="radio" id="bbb" name="made" value="aaa" readonly="readonly" />
<label for="bbb">第二</label>

3.若想变回可修改,用js实现

$('input[type="radio"]').css("pointer-events","auto");
$('label').css("pointer-events","auto");

这样就能实现既不能修改,又显示颜色。

4.如何自定义radio的颜色。

input{accent-color: red;//选中后的颜色
}

5.完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css">label{pointer-events: none;}input{pointer-events: none;accent-color: red;}</style></head><body><input type="radio" id="aaa"  name="made" value="aaa"   checked="checked" readonly="readonly"/><label for="aaa">第一</label><input type="radio" id="bbb" name="made" value="aaa" readonly="readonly" /><label for="bbb">第二</label><h1></h1><div id="cds"><button type="button" onclick="changeFn()">可修改</button></div><script type="text/javascript">function changeFn(){$('input[type="radio"]').css("pointer-events","auto");$('label').css("pointer-events","auto");}</script></body>
</html>

运行结果:

这篇关于input的type=‘radio‘设置只读属性颜色为灰色,如何修改的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/929061

相关文章

Go语言编译环境设置教程

《Go语言编译环境设置教程》Go语言支持高并发(goroutine)、自动垃圾回收,编译为跨平台二进制文件,云原生兼容且社区活跃,开发便捷,内置测试与vet工具辅助检测错误,依赖模块化管理,提升开发效... 目录Go语言优势下载 Go  配置编译环境配置 GOPROXYIDE 设置(VS Code)一些基本

小白也能轻松上手! 路由器设置优化指南

《小白也能轻松上手!路由器设置优化指南》在日常生活中,我们常常会遇到WiFi网速慢的问题,这主要受到三个方面的影响,首要原因是WiFi产品的配置优化不合理,其次是硬件性能的不足,以及宽带线路本身的质... 在数字化时代,网络已成为生活必需品,追剧、游戏、办公、学习都离不开稳定高速的网络。但很多人面对新路由器

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

linux hostname设置全过程

《linuxhostname设置全过程》:本文主要介绍linuxhostname设置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录查询hostname设置步骤其它相关点hostid/etc/hostsEDChina编程A工具license破解注意事项总结以RHE

Python设置Cookie永不超时的详细指南

《Python设置Cookie永不超时的详细指南》Cookie是一种存储在用户浏览器中的小型数据片段,用于记录用户的登录状态、偏好设置等信息,下面小编就来和大家详细讲讲Python如何设置Cookie... 目录一、Cookie的作用与重要性二、Cookie过期的原因三、实现Cookie永不超时的方法(一)

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

Qt 设置软件版本信息的实现

《Qt设置软件版本信息的实现》本文介绍了Qt项目中设置版本信息的三种常用方法,包括.pro文件和version.rc配置、CMakeLists.txt与version.h.in结合,具有一定的参考... 目录在运行程序期间设置版本信息可以参考VS在 QT 中设置软件版本信息的几种方法方法一:通过 .pro