vue 通過css實現輸入框居中輸入

今天開發時突然想寫blog了，水一下(oﾟvﾟ)ノ

css代碼

.inputStyle {
    text-align: center;/*主要就是這個，下面的都是樣式*/
    width: 6rem;
    height: 2.5rem;
    border: 1px solid #5a5e66;
    font-size: 14px;
    line-height: 48px;
    border-radius: 25px;
    outline: none　　/*outline設置為空，可以達到輸入框激活狀態時不出現方框*/
  }

 

input框

<input class="inputStyle" v-model="form.defectTime"></input>

效果圖

不可編輯狀態

css代碼

.disInputStyle{
    text-align: center;
    width: 6rem;
    height: 2.5rem;
    font-size: 14px;
    line-height: 48px;
    border-radius: 25px;
    outline: none;
    background: #F5F5F5;
    cursor: not-allowed　　/*這個實現了鼠標懸停時,為不可編輯狀態*/
  }

 input框

 <input class="disInputStyle" v-model="form.referenceTime" disabled></input>

效果圖