CSS定义input disabled样式

最新推荐文章于 2023-06-26 18:57:36 发布

Vv王蓁蓁

最新推荐文章于 2023-06-26 18:57:36 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS定义input disabled样式 disabled input disabled

本文链接：https://blog.youkuaiyun.com/sun80264629/article/details/84437523

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用HTML的disabled属性来禁用input元素，并提供了三种禁用input元素的方法。此外，还介绍了如何通过CSS来定制禁用状态下的input元素样式。

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

disabled属性规定应该禁用input元素

被禁用的input元素既不可以用，也不可以点击

以下三种方式可以禁用input元素：

<p><input type="text" disabled value="已禁用"/></p>
<p><input type="text" disabled="disabled" value="已禁用"/></p>
<p><input type="text" disabled=disabled value="已禁用"/></p>

被禁用的input元素默认显示为灰色（注：不同类型，不同版本的浏览器默认显示效果不同），可以通过css修改样式。

1. 利用CSS3 :disabled 伪元素定义

//Chrome Firefox Opera Safari
input:disabled{
	border: 1px solid #DDD;
	background-color: #F5F5F5;
	color:#ACA899;
}

2. 利用属性选择符定义

//IE6 failed
input[disabled]{
	border: 1px solid #DDD;
	background-color: #F5F5F5;
	color:#ACA899;
}

3. 利用类来定义

input.disabled{
	border: 1px solid #DDD;
	background-color: #F5F5F5;
	color:#ACA899;
}

最终结果：

input[disabled],input:disabled{
	border: 1px solid #DDD;
	background-color: #F5F5F5;
	color:#ACA899;
}

//IE6 Using Javascript to add CSS class "disabled"
* html input.disabled{
	border: 1px solid #DDD;
	background-color: #F5F5F5;
	color:#ACA899;
}