1.Input 改变光标颜色 2.div模拟Input 3.Input 焦点获取改变父类边框

1、input 改变光标颜色 

input {
    outline: none;
    background: none;
    border: none;
    text-shadow: 0px 0px 0px #363C54;
    color: #00bcbc;
    -webkit-text-fill-color: transparent;
}

 placeholder 颜色 或者 字体大小

input::-webkit-input-placeholder {
    font-size: 26px;
    color: #CDCED4;
}

textarea  改变光标颜色 

textarea {
    text-shadow: 0px 0px 0px #363C54;
    color: #00bcbc;
    -webkit-text-fill-color: transparent;
}

2、div模拟实现input （contenteditable="true" ： 可以对标签进行编辑）

<div contenteditable="true" 
    class="input div-text-auto"
    v-text="item.remark" placeholder="请输入内容"> 
</div>

主要css如下

.input {
    width: 100%;
    color: #00bcbc;
    outline: none;
}

.input:empty::before {
    color: lightgrey;
    content: attr(placeholder);
}

.input::-webkit-scrollbar{
    display: none;
}

.input:focus:before{
    content: none;
}

.input:focus{
    border: 1px solid #00bcbc;
}

/* div 模拟输入框 且高度自适应 */
.div-text-auto {
    min-height: 70px;
    height: auto;
    width: 100%;
    border-radius:4px;
    border:1px solid rgba(240,241,242,1);
    padding: 20px;
}

3、input 获取焦点改变父类边框样式 （vue 自定义指令方式）

<div class="special_input_layout" > 
    <input type="number" v-code>
    <span>℃ </span>
</div>

 JS (自定义指令)

directives: {
    // 输入框获取焦点以及失去焦点时value值得变化以及父元素样式的变化
    'code': {
        inserted: function (el) {
            var parent = el.parentNode
            el.onfocus = function () {
                parent.className = 'special_input_layout special_input_code'
            }
            el.onblur = function () {
                parent.className = 'special_input_layout'
            }
        }
    }
}

CSS

.special_input_layout {
    width: 360px;
    height: 100px;
    border-radius: 4px;
    border: 2px solid rgba(240, 241, 242, 1);
    padding: 0 30px;
    margin-top: 10px;
}

.special_input_code {
    border: 2px solid #00bcbc;
}