设置input标签readonly状态下的输入框颜色

最新推荐文章于 2025-06-24 10:29:45 发布
最新推荐文章于 2025-06-24 10:29:45 发布
阅读量1w 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： css readonly属性颜色 input标签 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39404258/article/details/84593905
本文介绍了一种简单的方法来更改HTML中readonly状态输入框的背景颜色，通过自定义CSS样式，可以轻松地将默认的灰色背景更改为所需的白色或其他颜色。

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

一般情况下 readonly状态下的输入框时灰色，如果想要改变颜色则需要添加一个css样式即可。

此操作将灰色改为白色。

<style>

input[readonly]{

background-color: #ffffff      (可根据需要改颜色)

}

</style>

 

vue中，设置全局的 input 为只读状态，并改变输入框背景色
weixin_48596030的博客
06-12 916
创建两个计算属性isReadOnly和inputBackgroundColor来根据check的值来确定input的只读状态和背景颜色。
Vue框架开发Electron12 - 动态改变Element-Ui默认el-Input背景样式
qq_39388660的博客
09-09 6262
Element-ui是一个非常好的UI设计模块，它提供给我们很多好看的按钮样式，非常适用于快速搭建UI，下面说说如果使用了element-ui之后，要更改它默认的el-Input样式应该怎么操作。 使用调试工具找出他的样式默认表，具体操作如下： 从上图知道默认的样式是.el-input__inner,那下面在改成自己想要的颜色： <style > .el-input__i...
更改input readonly时的背景色
abckingaa的博客
03-22 8536
disabled 文字会变成灰色，不可编辑。表单序列化提交到后台,会被忽略,不处理. readonly 文字不会变色，与能编辑的输入框看起来没区别,但不能编辑。表单序列化提交到后台,会处理. 我想让不可编辑的input提交到后台, 但readonly的颜色与可输入的一样,用户体验不好. disabled又不能满足要求,只能改了. 增加如下, 背景色就可以变化了,还可...
解决uniapp u-input设置disabled/readonly点击事件失效问题
最新发布
qq_45651201的博客
06-24 540
解决u-input组件设置disabled/readonly属性后点击事件失效的问题，可通过在外层添加view容器并设置pointer-events:none样式。该方法让鼠标事件穿透input元素，触发外层view的点击事件。MDN解释pointer-events:none会使元素不成为鼠标事件目标，事件会穿透到下层元素，从而保留交互功能的同时实现输入框的只读效果。（约120字）
input输入框设置readonly属性后更改字体颜色
twodays11的博客
08-16 2033
根据业务需求，需要将属性赋值之后改变为不可更改状态。 设置成不可更改有两种方法： 1.readonly 2.disabled 他们两者的区别： 1.readonly只针对input等有效，可以更改字体的颜色 2. disabled对选择框、下拉框等有效，默认是灰色，不能更改字体颜色。 怎样添加readonly： 怎样添加disabled： 给readonly更改字体颜色：（更改颜色放在添加readonly之前） ...
input输入框为只读灰色
热门推荐
Alinaxz的专栏
07-26 1万+
.inputReadOnly{readonly:expression(this.readOnly=true);background-color:expression((this.readOnly && this.readOnly==true)?"#BEBEBE":"") }
readonly txt 只读变灰
llc87的专栏
02-27 852
readonly style="background-color:#cccccc"
通过disabled和readonly将input设置为只读效果
12-14
首先，`disabled`属性将input元素设置为禁用状态。当一个input字段被`disabled`时，它的背景通常会呈现一种灰色半透明的效果，以表明用户无法交互。更重要的是，被`disabled`的input字段的值不会作为表单数据提交。...
[removed]为input设置readOnly属性(示例讲解)
10-26
其中，input元素拥有多个属性，比如readonly属性，它的作用是设置input元素为只读状态。当我们不希望用户修改input元素中的值时，可以使用这个属性，这样用户只能看到内容，但不能对其进行修改。为了在Javascript中...
用js一次改变多个input的readonly属性值的方法
10-25
此外，实际开发中可能需要考虑更多情况，比如怎样设置单个`input`元素为只读或取消只读状态，以及怎么处理其他表单元素的`readonly`属性等。这些都需要在具体的需求下通过合理编写JavaScript代码来实现。 总结来说...
Element Input输入框的使用方法
10-15
`<el-input>` 组件是最基本的输入框，可以通过 `v-model` 双向绑定数据，`placeholder` 设置占位文本。例如： ```html <el-input v-model="input" placeholder="请输入内容"></el-input> ``` ### 带图标的输入框 ...
通过调色板（QPalette）将readonly为true的QLineEdit颜色设置为灰色
danshiming的博客
12-18 2455
当将QLineEdit的readonly为true后，QLineEdit颜色默认情况下依然为白色，现在要设置为灰色（类似disable属性为true的颜色），除了用样式表设置外，调色板也可以实现，代码如下： escapedPatternLineEdit = new QLineEdit; escapedPatternLineEdit->setReadOnly(true); QPalette palette = escapedPatternLineEdit->palett
input的type=‘radio‘设置只读属性颜色为灰色，如何修改
weixin_51609337的博客
04-23 2288
input{//选中后的颜色。
uniapp中修改input里的字体颜色
qq_44721998的博客
09-10 1万+
看了好多文章修改颜色的方法都差不多，都没有效果，这种的最多： input::-webkit-input-placeholder { color: #BBBBBB!important; font-size: 16px; 最后试出来这种的有效果了 <HTML> <input class="search-inp" type="text" value="" placeholder="请输入您的关键词" placeholder-class="co"/> <css> .c
如何用jquery动态改变 input 输入框的readonly属性及CSS样式
weixin_34296641的博客
05-30 5359
2019独角兽企业重金招聘Python工程师标准>>> ...
Input的readonly 属性与disabled属性
ouanui的专栏
07-06 367
[b]readonly[/b] 不可编辑，可以获得焦点，背景颜色默认灰色，值的字体颜色默认为灰色，值可以在请求中传递 [b]disabled[/b] 不可编辑，不可以获得焦点，背景颜色默认灰色，值的字体颜色默认为灰色，值不可以在请求中传递； 为了使值不可修改，但显示为disabled的样式，且可以在请求中传递，则可以通过采用readonly，修改字体颜色来实现 例： [code...
html 中设置只读的textarea控件颜色
jzt_designer的专栏
05-25 2757
textarea[readonly] {background-color:#eeeeee !important;}上面红色底色的替换为想要设定的颜色。
【uniapp】解决在H5谷歌浏览器下 u-input 标签 设置只读后,click事件不生效
11-07 1万+
导致外层的view上写的点击事件不再生效。后，u–input就不再拦截鼠标事件，外层的view上的点击事件就能够正常生效了。使u–input里写上readonly&disabled为true之后，在外层的view上写的点击事件生效。的作用是让元素实体 “虚化”，我们可以看到这个标签，但只是一个虚幻的影子而已，类似于海市蜃楼。：由于兼容性差异，nvue下需使用u–input，非nvue下需使用u-input。但是更换浏览器后就可以，打包app也是正常可以触发的，本来是没打算。的u-input元素会。
python修改input输入框readonly问题
03-24
可以使用JavaScript来修改input输入框的readonly属性，具体代码如下： document.getElementById("input_id").readOnly = false; 其中，input_id是你想要修改的输入框的id。将false改为true即可将输入框设置为只读。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值