select 下拉框不可选

标签：不可 disabled 输入框 readonly input 下拉框 select 属性

select 下拉框不可选

• disabled和readonly
• select 下拉框不可选择
• CSS pointer-events 属性

通常情况下，设置表单输入框不可操作的时候会选择使用disabled或者readonly，那么disabled和readonly有什么区别呢？

disabled和readonly

首先来说这两个属性都可以作用在表单元素上，使表单元素不可用；但是他们有有所不同

如图可见：
readonly设置input输入框为只读，可以选中；
disabled设置input输入框不可输入，不可选中；

readonly设置input输入框，如果input上面绑定有事件，可以触发；
disabled设置input输入框，如果input绑定有事件，无法触发；
另外：
readonly设置input输入框，表单提交时，属性值可以被提交；
disabled设置input输入框，表单提交时属性值无法被提交；

select 下拉框不可选择

而如果设置select下拉框不可选择的话，如果设置属性为disabled的话，属性值无法提交，如果设置为readonly属性的话，下拉框仍然可以选择，这个时候可以采用另外一种方案，给select框设置属性

style="pointer-events: none;background-color:#eee;"

可以达到select下拉框不可选择同时不影响属性值提交的目标，如图效果

CSS pointer-events 属性

设置元素是否对鼠标事件做出反应：

属性值	描述
auto	默认值，设置该属性链接可以正常点击访问。
none	元素不能对鼠标事件做出反应

更多css pointer-events属性内容可以参考文档 ：https://www.runoob.com/cssref/css3-pr-pointer-events.html

标签：不可,disabled,输入框,readonly,input,下拉框,select,属性
From： https://blog.csdn.net/csdn565973850/article/details/139739020