CSS定义input disabled样式

        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;
}