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>
效果圖