css中 readonly和disabled的区别

html-css015

css中 readonly和disabled的区别,第1张

两者都起到form表单不能编辑文本框不能输入的作用，区别如下：

1.样式不同

（1）readonly表示只读，一般表示对文字内容只读，即不可更改内容，使用时外观无变（2）disabled表示是残疾，是残废,不管什么内容都会无效；使用时文本框会变灰

2.有效范围不同

（1）readonly只针对input和textarea之类的可以输入的文本有效（2）disabled对所有的表单元素都有效

3.是否获取鼠标标点

（1）readonly为true用户不能编辑但光标可以聚焦（2）disabled为true光标不能聚焦也不可编辑，无鼠标点击或进入等事件

4.是否能够提交数据

（1）readonly不影响表单提交等问题（2）disabled不支持表单等的值被提交

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

button {border:0width: 200pxheight: 80pxbackground-color: gainsborocursor: not-allowed}

3、浏览器运行index.html页面，此时通过css实现了按钮的禁用样式。