改变input在disabled状态下的样式

最新推荐文章于 2025-10-18 00:44:51 发布

原创最新推荐文章于 2025-10-18 00:44:51 发布 · 1.1w 阅读

7 ·

CC 4.0 BY-SA版权

css 同时被 2 个专栏收录

2 篇文章

订阅专栏

html

2 篇文章

订阅专栏

本文介绍了一种方法来改变HTML中被禁用的input元素的文字颜色及透明度，通过使用CSS选择器input[disabled]、input:disabled和input.disabled，可以实现让这些元素即使在禁用状态下也能显示为清晰的颜色而非默认的灰色。

input在disabled状态下，系统默认为变灰文字，以及透明度，所以光改文字颜色是不够的

input[disabled],input:disabled,input.disabled{  
    color: #333;  
    -webkit-text-fill-color:#333;  
    -webkit-opacity:1;  
    opacity: 1;  
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

云端君

关注关注

4
点赞
踩
7

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

javascript中input中readonly和disabled区别介绍

10-27

在JavaScript中，`readonly` 和 `disabled` 是两个用于表单输入元素的重要属性，它们都可以防止用户直接编辑输入框内的内容，但它们在功能和效果上存在一些差异。 1. **`readonly` 属性**： - `readonly` 属性主要...

通过disabled和readonly将input设置为只读效果

09-28

`readonly`属性与`disabled`类似，也会阻止用户编辑输入框的值，但它不会改变输入框的视觉样式（通常情况下），用户仍然可以看到并选中文本，只是无法修改。与`disabled`不同，`readonly`的`input`元素的值会在表单...

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

input 标签修改 disabled 属性默认样式（适配安卓 IOS）

qq_38836118的博客

11-07

8928

input:disabled{ background-color : #fff; 修改默认灰色样式 color: #666; opacity:1; 默认的不透明级别为0.3 -webkit-text-fill-color:#666; 字体颜色安卓与IOS适配 -webkit-opacity:1; 不透明级别安卓与IOS适配 }

修改input加disabled后的样式

糖果云专栏

02-14

6749

安卓手机下禁用加了： background-color: rgb(235, 235, 228); 苹果手机下禁用把透明度加到了0.3 。修改默认样式只需加以下样式即可。 input[disabled]{ filter: alpha(opacity=100); opacity:1; background: #fff; } 看一下安卓与苹果禁用后的区别正常未禁用：...

Effeckt.css状态管理：active、focus与disabled状态的样式处理

最新发布

gitblog_00787的博客

10-18

575

在前端开发中，用户交互状态的视觉反馈直接影响产品体验。Effeckt.css作为轻量级交互样式库，通过统一的状态管理机制，让按钮、表单等组件在不同交互状态下呈现一致的视觉反馈。本文将详解Effeckt.css中active（激活）、focus（焦点）与disabled（禁用）三种核心状态的实现方式，帮助开发者快速掌握状态样式的设计逻辑与应用技巧。 ## 状态样式的基础实现 Effeckt.cs...

input禁用样式修改 input disabled样式禁用方法及样式isabled样式禁用方法及样式

weixin_30408675的博客

09-12

3357

disabled 属性规定应该禁用 input 元素。被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。以下三种写法都可以禁用 input 1 2 3 ...

CSS定义input disabled样式

cy12272961151353的专栏

05-21

2867

disabled 属性规定应该禁用 input 元素。　　被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止(比如选择了一个复选框等等)。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。　　以下三种写法都可以禁用 input 　　被禁用的 input 默认显示灰色，可以通过

微信小程序点击按钮动态切换input的disabled禁用/启用状态功能

10-15

在微信小程序中，动态控制Input组件的disabled状态是一项常见的需求，尤其在实现用户信息编辑与保存功能时。本文将详细讲解如何实现这一功能，并解决在实际开发中可能遇到的“disabled属性不生效”的问题。首先，...

vue前端开发，怎么设置el-radio-group在disabled状态不好下的颜色

05-01

好的，我现在要解决用户的问题：如何在Vue中使用Element UI的el-radio-group组件，在disabled状态下自定义颜色。用户提到的是在禁用状态下改变颜色，所以需要找到相关的样式设置方法。首先，回忆一下Element UI的...

a-select 设置disabled之后修改它的样式和hover和input设置disabled一样

10-17

如果你想要改变禁用状态下的样式，使之与 `input[type="checkbox"]` 或 `input[type="radio"]` 等元素在鼠标悬停(`hover`)时的样式一致，可以自定义样式覆盖默认样式。你可以通过CSS针对`.ant-select-disabled`、`....

html按钮disabled状态,CSS定义input disabled样式的三种方法

weixin_34585343的博客

06-01

7141

表单提交的时候我们经常会让提交按钮禁用，满足条件后按钮恢复，disabled禁用按钮后怎么用CSS来改变禁用disabled按钮的样式呢？下面看青岛星网：CSS定义input disabled样式的三种方法。disabled 属性规定应该禁用 input 元素。被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止(比如选择了一个复选框等等)。...

elementui的input的disabled属性导致点击事件失效，可采用readonly属性替换，修改其样式如下

m0_46120422的博客

01-26

2045

关键点在于readonly-input类名映射变量 --el-input-bg-color。

Input Disabled默认样式问题

weixin_39782183的博客

03-07

637

input:disabled, textarea:diabled { -webkit-text-fill-color: #000; -webkit-opacity: 1; color: #000; } 以上样式将覆盖其系统默认设置的值，能够实现android和ios的兼容性。其中,-webkit-text-fill-color是用来做填充色使用的，如果有设置这个值，则c...

element+vue 修改disabled样式

weixin_44195615的博客

01-17

1392

首先这个大家一定都知道，可以控制禁用按钮的。

input修改disabled属性默认样式，适配IOS安卓

xdongll的专栏

01-27

919

IOS默认设置透明度.3，需要修改 .van-stepper__input[disabled] { color: #7d7e80; -webkit-text-fill-color: #7d7e80; -webkit-opacity: 1; opacity: 1; //默认的不透明级别为0.3 background-color: #fff; }...

解决input框中加入disabled=“disabled“之后，改变字体的颜色（默认的是灰色）

热门推荐

一片天空

07-31

1万+

发现给input disabled 输入框设置以下样式： input:disabled, input[disabled]{ color: red; opacity: 1; }· 发现没有效果；而后改为这样： input:disabled, input[disabled]{ color: red; opacity: 1; -webkit-text-fill-color:red; // ios 和安卓9.0 必须添加此属性，才会生效 -webkit-opacity:1; } -we

使用css样式解决input 设置disabled="true"属性后变为灰色问题

idongit的博客

08-07

1万+

很简单为disabled设置背景颜色为白色（color设置的是input框中值的颜色） input[disabled]{background:#fff;opacity:1;color:black;}

antd React修改input框disabled字体颜色

10-30

在Ant Design for React库中，如果你想修改`<Input>`组件在disabled状态下的字体颜色，你可以通过自定义样式或者直接设置`style`属性来实现。这里有两个方法： 1. **使用CSS样式覆盖**: 在项目的全局CSS文件中（如`global.css`），添加针对`ant-input-disabled`类的样式规则，例如： ```css .ant-input-disabled { color: /* 你想要的颜色 */; } ``` 确保这个样式表被正确的引入到需要应用的地方。 2. **在组件内部动态设置**: 如果你只想在特定组件内改变，可以在渲染`<Input>`时传递一个`style`对象作为props，例如： ```jsx import { Input } from 'antd'; const CustomInput = (props) => { const disabledStyle = { color: props.disabled ? 'gray' : 'black'; }; // 或者你喜欢的颜色 return <Input disabled={props.disabled} style={disabledStyle} />; }; // 使用时传入true或false来控制disabled状态及其样式 <CustomInput disabled={true} /> ``` 记得替换`'gray'`或`'black'`为你实际想要的颜色值。