精美而实用的网站,关注web编程技术、网站运营、SEO推广,让您轻松愉快的学习

表单提交的时候我们经常会让提交按钮禁用,满足条件后按钮恢复,disabled禁用按钮后怎么用CSS来改变禁用disabled按钮的样式呢?下面看青岛星网:CSS定义input disabled样式的三种方法。

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

按钮禁用disabled的三种写法

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

被禁用的input按钮默认显示灰色,只是文字显示灰色,背景颜色不变哦,如果想给disabled的按钮变化背景颜色,可以通过CSS修改样式。注:IE9及以下无法改变字体颜色。

CSS定义input disabled样式的三种方法

input:disabled{
    border: 1px solid #DDD;
    background-color: #F5F5F5;
    color:#ACA899;
}
//IE8-
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;
}
Tags:CSS disabled 禁用