禁止输入选择问题

1.项目之前遇到过此问题 用css处理即可，这里我写了个demo总结下

需求：要输入框/下拉框禁止输入点击效果，并且显示禁止符号

(通常情况下 输入框/下拉框外面还有一层父元素)

一般我们肯定会给父元素和子元素用属性 cursor: not-allowed;

问题：但是惊奇的发现输入框鼠标划过有禁止符号，但是还可以输入内容？？

解决：要想让输入框既有禁止符号显示，又禁止输入，需要在子元素中添加属性 pointer-events: none;

注：如果在父元素中添加属性 pointer-events: none; 会导致鼠标放上去虽然不能点击了，但显示的是箭头 而不是禁用符号，

　　因为设置的 pointer-events:none;  把所有点击事件全部禁掉了，cursor 也没有了

div {
            width: 300px;
            height: 120px;
            background-color: grey;
            cursor: not-allowed;
            /* 居中 */
            position: relative;
            display: table-cell;    
            text-align: center;    
            vertical-align: middle;
        }
        .el-input {
            height: 40px;
            width: 80%;
            cursor: not-allowed;
            pointer-events: none;
        }

<div>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
</div>

data: {
    input: ''
},

由于截不出效果图，贴张demo样式图，大家自行脑补下吧