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>

效果图