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;
}